React中創建組件的3種方式

  • 2019 年 10 月 4 日
  • 筆記

目前作者所知道的創建react組件的方式有三種：

  1. 函數式定義(無狀態組件) 
function MyComponent(props){  　　return(         <h1>mycomponent</h1>      )  }
  1. es5原生方式 
 const MyComponent=React.createClass({          render:function () {              return <h1>mycomponent</h1>          }      })
  1. es6中class類的方式（有狀態組件） 注意：無論使用哪種方式創建組件，組件名稱的首字母都必須大小，因為我們寫的是JSX，最後是需要通過babel轉義成es5的語法的，而babel在進行轉義JSX語法時，是調用了 React.createElement() 這個方法，這個方法需要接收三個參數：type, config, children。第一個參數聲明了這個元素的類型，當創建自定義組件時沒有首字母小寫時， 而 babel 在轉義時把它當成了一個字元串 傳遞進去了；當首字母大寫時，babel 在轉義時傳遞了一個變數進去。問題就在這裡，如果傳遞的是一個字元串，那麼在創建虛擬DOM對象時，React會認為這是一個原生的HTML標籤，但是這顯然不是一個原生的HTML標籤，因此去創建一個不存在的標籤肯定是會報錯的。如果首字母大寫，那麼就會當成一個變數傳遞進去，這個時候React會知道這是一個自定義組件，因此他就不會報錯了。
   class MyConponent extends React.Component{          constructor(props){              super(props);          }          render() {              return (                  <h1>mycomponent</h1>              );          }      }

那麼問題來了，這三種方式有啥區別呢？這裡說明一個問題，很多時候同一種效果往往有很多種實現方式，所以我們在學習的過程中要避免章節化思維，要對技術進行橫向比較，這樣能幫你更　加深入的理解各種方式的優缺點。

1.函數式定義和類定義的對比

　　　　　　　函數式定義組件沒有state和生命周期函數且不能訪問this，而類定義中這些都可以有。

2.類定義和React.createClass原生定義的區別

　　　　　　　　2.1函數this的綁定

　　　　　　　　　　React.createClass創造的組件，其每一個成員函數的this都會自動由React綁定，所以使用時可以直接this.method,而通過class創建組件的成員函數則需要手動綁定，如this.method=this.method.bind(this).

　　　　　　　　2.2Mixins特性

　　　　　　　　　　使用 React.createClass 的話，我們可以在創建組件時添加一個叫做 mixins 的屬性，並將可供混合的類的集合以數組的形式賦給 mixins，關於mixins不了解的同學可以參考mixins的前世今生

3.如何選擇哪種方式創建組件

　　　　　　由於React團隊已經聲明React.createClass最終會被React.Component的類形式所取代。但是在找到Mixins替代方案之前是不會廢棄掉React.createClass形式。所以：

能用React.Component創建的組件的就盡量不用React.createClass形式創建組件。

除此之外，創建組件的形式選擇還應該根據下面來決定：

1、只要有可能，盡量使用無狀態組件創建形式。    2、否則（如需要state、生命周期方法等），使用`React.Component`這種es6形式創建組件

Tags:

VirMach 便宜 VPS