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

小橋流水嘩啦啦發表於2018-11-08
React元件

玩轉 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

關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術乾貨；

相關文章