玩轉 React 【第03期】：邂逅 React 組件

上期回顧

• 前文咱們講解了 React 模板 JSX，接着咱們繼續來看看 React 組件又是如何工做的呢？

• 組件化開發到了今天已是你們的共識，在 React 中，組件一樣也是組成咱們整個項目的基本單元。 react 中組件能夠將UI切分紅一些的獨立的、可複用的部件。組件的返回值是一個須要在也頁面上顯示的 React 元素，也就是說 React 中組件必須有返回值。示例以下：

  function Hello (props){
        return (<div>
            <h1>Hello world</h1>
        </div);
    }
  複製代碼

整個 Hello 就是一個組件，調用的時候，咱們 能夠直接 調用 就能夠，另外這裏要注意，組件的命名必須是首字母大寫。

建立組件

在 React 中建立組件有三種方式：

1） 無狀態的函數式組件；

2） 基於ES5 的 React.createClass;

3） 基於 ES6 的 extends React.Component；

這三種方式均可以去建立一個 React 組件，可是在實際的使用過程當中有什麼不一樣呢？咱們具體來看。

函數式組件

函數式組件，是爲了建立純粹的展現組件，也就是說函數式組件一旦建立了就不能修改，除非它的父級修改了纔會引發它的修改，這樣的好處就是性能較高，內部沒有太多的東西，如 state 和 聲明週期，固然生命週期和state是什麼咱們後邊再詳細說，這裏咱們先大概瞭解，這倆東西主要是用來更改組件的內容，以及組件修改後的一系列處理的。 函數式組件的編寫方式以下：

function Hello (props[,context]){
    return (<div>
        <h1>Hello {props.name}</h1>
    </div);
}

ReactDOM.render(<Hello name="MiaoV" />, node)
複製代碼

return 中就是咱們要顯示在頁面上的內容，props 是父組件傳入的信息，context 是父祖中傳入的信息，關於這兩項的具體內容咱們也放在下篇內容中詳細的講解。

除了上述內容以外，函數式組件還有如下幾個特徵：

1 組件不會被實例化，而是直接解析成 reactElemnt，總體渲染性能獲得提高

2 沒有實例化，天然在組件內部咱們也不能使用 this

3 組件沒法訪問生命週期的方法，這個咱們已經介紹過

4 組件沒有state，只能訪問 props

函數式組件因爲其優良的性能，我的建議若是一個組件的內部咱們不須要控制它進行改變的話，儘可能仍是使用 函數式組件

React.createClass

React.createClass 是一種基於 ES5 的建立組件的方式。本質就是一個工廠，在 React.createClass(配置對象) 放入咱們的配置對象，而後它會幫咱們返回一個 React 組件，

示例以下：

let Fn = React.createClass({
    render: function(){
        return (
            <div>
                <h1 id="title">Hello React!</h1>
                <h2 id={title}>Hello React!</h2>
                <h2 className="box">class屬性</h2>
                <h2 style={ {background: 'red'} }>style屬性</h2>
            </div>
        );
    }
});
複製代碼

上述是 React.createClass 的使用方式，可是要注意 React.createClass 方法 在React 16 以後就已經取消了，因此咱們就再也不討論這個方法，直接來看 ES6 的寫法。

React.Component

React ES6中，若是要聲明一個類式組件，咱們須要從 React.Component 繼承過來，具體寫法以下：

class Hello extends React.Component {
    render(){
        return (
            <h1>hello! {this.props.name}</h1>                
        );
    }
}
ReactDOM.render(
    <Hello name = "MiaoV" />
    document.querySelector('#app')
);
複製代碼

在使用 React.Component 的時候，有一些問題是須要咱們注意的：

• 在 React.Component 中咱們必需要定義一個 render 方法，這個方法中的返回值，就是最終咱們要渲染到頁面中 ReactElement 。

• 組件在實際調用的時候，會生成一個實例化對象，因此組件的方法中的 this 就指向這個實例化對象。

• props 這個屬性中存儲的是咱們調用時傳入的屬性，也是默認的第0個參數，因此組件中若是定義了 constructor， 必須 使用 super 繼承，另外必須 把第 0 個參數傳入去，示例以下：

• 最後強調一下，組件的命名必須首字母大寫。

  class Hello extends React.Component {
          constructor(props){
              super(props);
          }
          render(){
              return (
                  <h1>hello! {this.props.name}</h1>                
              );
          }
      }
  複製代碼

關於組件的建立咱們就先介紹到這，在下一篇中，咱們會詳細的講解 props,state 以及組件其餘的相關知識。

——以上是筆者概括總結，若有誤之處，歡迎指出。

訂閱號ID：Miaovclass

關注妙味訂閱號：「妙味前端」，爲您帶來優質前端技術乾貨；