腳本之家服務器常用軟件

快捷導航

軟件下載

android MAC 驅動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

React組件化學習入門教程講解

更新時間：2022年09月10日 10:04:51 作者：小余努力搬磚

React是現(xiàn)在前端使用頻率最高的三大框架之一，React率先提出虛擬DOM的思想和實現(xiàn)，使其保持有良好的性能。本篇文章將對React組件化的入門學習進行講解，同時針對模塊化的思想進行概述，為接下來組件化開發(fā)的文章進行知識儲備

模塊化

模塊

理解：向外提供特定功能的js程序,一般就是一個js文件。

為什么：要拆成模塊，隨著業(yè)務邏輯增加,代碼越來越多且復雜。

作用：復用js,簡化js的編寫,提高js運行效率。

模塊化

當應用的js都以模塊來編寫,這個應用就是一個模塊化的應用

組件化

組件

理解：用來實現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/img等等)

為什么：要用組件，一個界面的功能復雜

作用：復用編碼,簡化項目編碼,提高運行效率

組件化

當應用是以多組件的方式實現(xiàn),這個應用就是組件化的應用

函數(shù)式組件

實質：一個 React 應用就是構建在 React 組件之上的。

函數(shù)組件：該函數(shù)是一個有效的 React 組件，因為它接收唯一帶有數(shù)據(jù)的 “?props?”（代表屬性）對象與并返回一個 React 元素。這類組件被稱為“函數(shù)組件”，因為它本質上就是 JavaScript 函數(shù)。

創(chuàng)建函數(shù)組件

function HelloPerson(){
 return <h1>你好，我是函數(shù)式組件!</h1>;
 
}
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));

說明：解析組件標簽HelloPerson，發(fā)現(xiàn)組件是函數(shù)定義的，調用該函數(shù)，將返回的虛擬DOM，轉為真實的DOM，隨后呈現(xiàn)在頁面上。

Props參數(shù)傳遞（重點）

function HelloPerson(person){
      console.log(this);//此處undefined babel編譯后采取嚴格模式
  return (
  <ul>
  <li>姓名：{person.name}</li>
  <li>年齡：{person.age}</li>
  </ul>
  )
 }
ReactDOM.render(<HelloPerson name='張三' age={18}/>,document.getElementById('root'));

復合函數(shù)組件

 function GetName(props){
 return <li>姓名：{props.name}</li>
 }
 function GetAge(props){
 return <li>年齡：{props.age}</li>
 }
function HelloPerson(person){
 return (
 <ul>
 <GetName name={person.name}/>
 <GetAge age={person.age}/>
 </ul>
  )
  }
ReactDOM.render(<HelloPerson name='張三' age={18}/>,document.getElementById('root'));

類式組件

ES6 的 class 來定義組件，通過繼承React.Component。解析流程如下：

React解析組件標簽，找到了MyComponent組件。

發(fā)現(xiàn)組件是使用類定義的，隨后new出來該類的實例，并通過該實例調用到原型上的render方法。

將render返回的虛擬DOM轉為真實DOM，隨后呈現(xiàn)在頁面中。

創(chuàng)建實例

//創(chuàng)建類組件 1:繼承react中的Component類 2：需要render
class Person extends React.Component{
 render(){
 return (
     <h1>你好，我是類式組件！</h1>
 )
 }
}
ReactDOM.render(<Person/>,document.getElementById("root"));

用戶自定義組件

const element = <Person/>
ReactDOM.render(element,document.getElementById("root"));

到此這篇關于React組件化學習入門教程講解的文章就介紹到這了,更多相關React組件化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频