摘要：中組件可以將切分成一些的獨(dú)立的可復(fù)用的部件。組件的返回值是一個(gè)需要在也頁(yè)面上顯示的元素，也就是說(shuō)中組件必須有返回值。

上期回顧

前文我們講解了 React 模板 JSX，接著我們繼續(xù)來(lái)看看 React 組件又是如何工作的呢？

組件化開(kāi)發(fā)到了今天已經(jīng)是大家的共識(shí)，在 React 中，組件同樣也是組成我們整個(gè)項(xiàng)目的基本單元。

react 中組件可以將UI切分成一些的獨(dú)立的、可復(fù)用的部件。組件的返回值是一個(gè)需要在也頁(yè)面上顯示的 React 元素，也就是說(shuō) React 中組件必須有返回值。示例如下：

function Hello (props){
    return (

        
Hello world
    
整個(gè) Hello 就是一個(gè)組件，調(diào)用的時(shí)候，我們 可以直接 調(diào)用  就可以，另外這里要注意，組件的命名必須是首字母大寫(xiě)。
創(chuàng)建組件
在 React 中創(chuàng)建組件有三種方式：
1） 無(wú)狀態(tài)的函數(shù)式組件； 
2） 基于ES5 的 React.createClass; 
3） 基于 ES6 的 extends React.Component；
這三種方式都可以去創(chuàng)建一個(gè) React 組件，但是在實(shí)際的使用過(guò)程中有什么不同呢？我們具體來(lái)看。
函數(shù)式組件
函數(shù)式組件，是為了創(chuàng)建純粹的展示組件，也就是說(shuō)函數(shù)式組件一旦創(chuàng)建了就不能修改，除非它的父級(jí)修改了才會(huì)引起它的修改，這樣的好處就是性能較高，內(nèi)部沒(méi)有太多的東西，如 state 和 聲明周期，當(dāng)然生命周期和state是什么我們后邊再詳細(xì)說(shuō)，這里我們先大概了解，這倆東西主要是用來(lái)更改組件的內(nèi)容，以及組件修改后的一系列處理的。
函數(shù)式組件的編寫(xiě)方式如下：
function Hello (props[,context]){
    return (

        
Hello {props.name}
    , node)
return 中就是我們要顯示在頁(yè)面上的內(nèi)容，props 是父組件傳入的信息，context 是父祖中傳入的信息，關(guān)于這兩項(xiàng)的具體內(nèi)容我們也放在下篇內(nèi)容中詳細(xì)的講解。
除了上述內(nèi)容之外，函數(shù)式組件還有以下幾個(gè)特征：
1 組件不會(huì)被實(shí)例化，而是直接解析成 reactElemnt，整體渲染性能得到提升
2 沒(méi)有實(shí)例化，自然在組件內(nèi)部我們也不能使用 this
3 組件無(wú)法訪(fǎng)問(wèn)生命周期的方法，這個(gè)我們已經(jīng)介紹過(guò)
4 組件沒(méi)有state，只能訪(fǎng)問(wèn) props
函數(shù)式組件由于其優(yōu)良的性能，個(gè)人建議如果一個(gè)組件的內(nèi)部我們不需要控制它進(jìn)行改變的話(huà)，盡量還是使用 函數(shù)式組件
React.createClass
React.createClass 是一種基于 ES5 的創(chuàng)建組件的方式。本質(zhì)就是一個(gè)工廠，在 React.createClass(配置對(duì)象) 放入我們的配置對(duì)象，然后它會(huì)幫我們返回一個(gè) React 組件，
示例如下：
let Fn = React.createClass({
    render: function(){
        return (
            

                
Hello React!
                
Hello React!
                
class屬性
                
style屬性
            
        );
    }
});
上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法 在React 16 之后就已經(jīng)取消了，所以我們就不再討論這個(gè)方法，直接來(lái)看 ES6 的寫(xiě)法。
React.Component
React ES6中，如果要聲明一個(gè)類(lèi)式組件，我們需要從 React.Component 繼承過(guò)來(lái)，具體寫(xiě)法如下：
class Hello extends React.Component {
    render(){
        return (
            
hello! {this.props.name}
                
        );
    }
}
ReactDOM.render(
    
    document.querySelector("#app")
);
在使用 React.Component 的時(shí)候，有一些問(wèn)題是需要我們注意的：

在 React.Component 中我們必須要定義一個(gè) render 方法，這個(gè)方法中的返回值，就是最終我們要渲染到頁(yè)面中 ReactElement 。
組件在實(shí)際調(diào)用的時(shí)候，會(huì)生成一個(gè)實(shí)例化對(duì)象，所以組件的方法中的 this 就指向這個(gè)實(shí)例化對(duì)象。
props 這個(gè)屬性中存儲(chǔ)的是我們調(diào)用時(shí)傳入的屬性，也是默認(rèn)的第0個(gè)參數(shù)，所以組件中如果定義了 constructor， 必須 使用 super 繼承，另外必須 把第 0 個(gè)參數(shù)傳入去，示例如下：
最后強(qiáng)調(diào)一下，組件的命名必須首字母大寫(xiě)。

class Hello extends React.Component {
      constructor(props){
          super(props);
      }
      render(){
          return (
              
hello! {this.props.name}
                
          );
      }
  }

關(guān)于組件的創(chuàng)建我們就先介紹到這，在下一篇中，我們會(huì)詳細(xì)的講解 props,state 以及組件其他的相關(guān)知識(shí)。
——以上是筆者歸納總結(jié)，如有誤之處，歡迎指出。
訂閱號(hào)ID：Miaovclass
關(guān)注妙味訂閱號(hào)：“妙味前端”，為您帶來(lái)優(yōu)質(zhì)前端技術(shù)干貨；
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               react
                                                                                                           _React
                                                                                                           React 源碼
                                                                                                           react cdn
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99091.html
               
                      
               

                 
                                  
上一篇：如何創(chuàng)建并發(fā)布一個(gè) vue 組件
  
                                                
                                       
下一篇：React 源碼深度解讀（八）：事務(wù) - Part 2