一、關於事件繫結

① 在宣告時一起繫結：

<div onClick={this.OnClick.bind(this)}></div>

② 使用函式式宣告事件：

<div onClick={()=>this.OnClick()}></div>

③ 在按鈕內宣告，在constructor內繫結：

constructor(props) {
     super(props);
     this.OnClick = this.OnClick.bind(this)
}
render(){
    return(
        <div onClick={this
 
.OnClick}></div>
    )
}

結論 三者對效能優化的優先順序為③＞②＞①

比較：①②相對於③，再次執行時都要再渲染一編render()裡的bind函式和函式宣告式，

　　　而③的繫結函式只執行一次，並不會每次執行時都進行呼叫，

　　　對於效能方面，顯然③方式會比①②更好，而且②相對①對效能的影響會低一點。

二、關於元件傳值

① 傳值的時候定義物件：

render() {
        return (<div >
            <Demo name={{ age: 18 }} />
        </div>);
    }

②傳值前定義好物件：

let name={ age: 18 }    
   render() {
        return (<div >
            <Demo name={name} />
        </div>);
    }

結論 兩者對效能優化的優先順序為②＞①

　　在父元件向子元件傳值時 物件的key和value 在render內先定義在使用 不然每次子元件都會生成新的物件傳遞;

　 傳遞props/state時 只需傳遞需要的引數 大量傳值時考慮是否需要引用redux;

三、關於多元件優化

父元件因狀態的變化更改，而子元件並沒有狀態變化時，若子元件隨著父元件一起更新，會造成比較大的效能浪費

①shouldComponentUpdate(nextProps, nextState) (可以看週期詳細介紹:https://www.cnblogs.com/chen-yi-yi/p/13542476.html)

② React.PureComponent 替換 React.Component

​    這比自己寫shouldComponentUpdate函式進行比較來的簡單且效能更好，但只適用於元件只根據傳進來的資料進行渲染而沒有內部狀態時使用，可以最大限度的提升效能。

③ ImmutableJS：() (Immutable.js 採用了持久化資料結構和結構共享，保證每一個物件都是不可變的，任何新增、修改、刪除等操作都會生成一個新的物件，且通過結構共享等方式大幅提高效能。https://github.com/immutable-js/immutable-js)

四、關於神奇的Key

　　對於陣列形式的資料，遍歷時React會要求你為每一個數據值新增Key,而Key必須時獨一無二的，

　　在選取Key值時儘量不要用索引，因為如果當資料的新增方式不是順序新增，而是以其他方式（逆序，隨機等），會導致每一次新增資料，每一個數據值的索引都不一樣，

　　這就導致了Key的變化，而當Key變化時，React就會認為這與之前的資料值不相同，會多次執行渲染，會造成大量的效能浪費。所以jin量不要使用將資料的Key設為索引。