react 簡單優化

在url後加 ?react_pref 能夠結合Chrome自帶的Performance作性能測試

單組件優化：

核心：減小render函數執行次數

事件綁定：

• 在constructor中使用bind綁定：

constructor(props) {
    super(props)
    this.eventHandle = this.eventHandle.bind(this)
}
複製代碼

* 優勢：只須要綁定一次，而且只會執行一次；
* 缺點：即便不須要state也須要添加constructor來綁定，代碼量多一點
複製代碼

• 在render中使用bind綁定：

// ...
render() {
    return (
        <button onClick={this.clickHandle.bind(this)}></button>
    )
}
// ...
複製代碼

* 優勢：寫法簡單；
* 缺點：每次執行render都會從新執行一次，屢次使用同一個函數須要綁定屢次（不推薦使用該方法）
複製代碼

• 在render中使用箭頭函數綁定：

// ...
render() {
    return (
        <button onClick={() => this.clickHandle()}></button>
    )
}
// ...
複製代碼

* 優勢：寫法簡單，相對於上一種方法性能稍好一點；
* 缺點：每次執行render都要從新生成一個函數
複製代碼

• 在函數初始化時使用箭頭函數綁定（實驗性）：

// ...
clickHandle = () => {
    // ...
}
render() {
    return (
        <button onClick={this.clickHandle}></button>
    )
}
// ...
複製代碼

* 優勢：寫法簡單，結合了以上三種方法的優勢；
* 缺點：目前是實驗性的語法，須要babel轉譯
複製代碼

總結：方式一是官方推薦的方式，也是性能最好的方式；方法二和方法三有性能問題，而且當方法做爲屬性傳遞給子組件時會觸發re-render，由於子組件的props發生了改變；方法四是最好的綁定方式，可是須要結合babel轉譯

屬性傳遞：

因爲js的特性（對象在內存中的存儲），若是傳遞的是一個對象，儘可能提早聲明一個索引指向該對象，避免每次render都從新在內存中生成一個新的對象。

多組件優化：

核心：減小子組件render函數的執行次數（減小子組件的重渲）

定製子組件的shouldComponentUpdate

當父組件發生了render，子組件都會從新渲染。不少時候子組件並無發生任何改變，它接收到父組件傳給它的props並無發生變化，自身的state也沒有變化，這種狀況下子組件的無腦從新render就能夠在其shouldComponentUpdate()鉤子函數裏作一些操做。這個鉤子函數默認返回true，即render會執行；咱們在裏面作些業務上的檢測，再返回true或false來肯定子組件該不應從新渲染。

使用React.PureComponent(React@15.3新增)

它相似於React.Component，區別在於PurComponent簡單的實現了shouldComponentUpdate()而Component沒有實現。適用狀況：組件的render函數在給定相同的props和state時渲染相同的結果（純組件），能夠提高性能。

Note(官網上的Note) React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data. Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also 「pure」.

PureComponent的shouldComponent()只實現了淺對比，深對比太消耗性能（對象的深比較須要用到遞歸，複雜度過高，性能消耗太大）。

可使用immutable這個庫來進行對象的深比較，複雜度比較低，可是這個庫比較大。使用方法參考文檔

redux優化

當咱們頁面使用的數據須要對獲取的redux中的數據進行一些處理（複雜的計算）才能使用，而且不少狀態是常常切換得時候，咱們能夠將那些狀態緩存起來，避免每次切換都從新計算。可使用react官方推薦一個庫——reselect，使用方法參考文檔

列表類組件優化

當咱們渲染一個列表時，必須給每一項傳key，不然react會報一個警告。這個key不建議使用數組遍歷時的index，由於它只能幫助咱們消除警告而已，並無任何實際意義。若是咱們在數組前面添加一個元素，那麼react會認爲全部的元素都發生了改變，因此所有都從新渲染了，咱們並無感覺到虛擬DOM帶給咱們的優化。因此key的值必須是惟一的纔有意義。

推薦閱讀
react組件性能優化探索實踐
高性能 React 組件

原文連接（linxunzyf.cn/posts/d5323…）