[TOC] # render什么時候會觸發  這張圖將react的生命周期分為了三個階段：生成期、存在期、銷毀期，這樣在create、props、state、unMount狀態變化時我們可以清楚的看到reacte觸發了哪些生命周期鉤子以及什么時候會render。 如果我們需要更改root的一個state，使綠色組件視圖更改  如果你寫過vue，你會發現組件更新是如上圖那樣的（視圖指令已編譯為修改視圖的函數存放在綁定的state里的屬性里，所以能夠做到靶向修改），而react會以組件為根，重新渲染整個組件子樹，如下圖（綠色是期望的render路徑，橙色是無用render）：  所以在react里，我們探討的render性能優化是react調用render的路徑如下：  <br> <br> # 如何避免這些不必要的render： ## shouldComponentUpdate ~~~ shouldComponentUpdate(nextProps,?nextState) ~~~ 使用shouldComponentUpdate()以讓React知道當前狀態或屬性的改變是否不影響組件的輸出，默認返回ture，返回false時不會重寫render，而且該方法并不會在初始化渲染或當使用forceUpdate()時被調用，我們要做的只是這樣： ~~~ shouldComponentUpdate(nextProps, nextState) { return nextState.someData !== this.state.someData } ~~~ ## React.PureComponent React.PureComponent 與 React.Component 幾乎完全相同，但 React.PureComponent 通過props和state的淺對比來實現 shouldComponentUpate()。如果對象包含復雜的數據結構，它可能會因深層的數據不一致而產生錯誤的否定判斷(表現為對象深層的數據已改變視圖卻沒有更新） > 關注點： * 無論組件是否是 PureComponent，如果定義了 shouldComponentUpdate()，那么會調用它并以它的執行結果來判斷是否 update。在組件未定義 shouldComponentUpdate() 的情況下，會判斷該組件是否是 PureComponent，如果是的話，會對新舊 props、state 進行 shallowEqual 比較，一旦新舊不一致，會觸發 update。 * 淺判等 只會比較到兩個對象的 ownProperty 是否符合[Object.js()](https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js#L39)判等，不會遞歸地去深層比較---[源碼](https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js#L39) ~~~ const hasOwnProperty = Object.prototype.hasOwnProperty; /** * inlined Object.is polyfill to avoid requiring consumers ship their own * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is */ function is(x: mixed, y: mixed): boolean { // SameValue algorithm if (x === y) { // Steps 1-5, 7-10 // Steps 6.b-6.e: +0 != -0 // Added the nonzero y check to make Flow happy, but it is redundant return x !== 0 || y !== 0 || 1 / x === 1 / y; } else { // Step 6.a: NaN == NaN return x !== x && y !== y; } } /** * Performs equality by iterating through keys on an object and returning false * when any key has values which are not strictly equal between the arguments. * Returns true when the values of all keys are strictly equal. */ function shallowEqual(objA: mixed, objB: mixed): boolean { if (is(objA, objB)) { return true; } if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. for (let i = 0; i < keysA.length; i++) { if ( !hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]]) ) { return false; } } return true; } ~~~ <br> ## [react-immutable-render-mixin](https://github.com/jurassix/react-immutable-render-mixin) 我想復雜數組沒變化時也不要render(), 那你用[react-immutable-render-mixin](https://github.com/jurassix/react-immutable-render-mixin)，來，我們看看插件的介紹： > Users are urged to use PureRenderMixin with facebook/immutable-js. If performance is still an issue an examination of your usage of Immutable.js should be your first path towards a solution. This library was created from experimentations with Immutable that were ultimately erroneous; improper usage of Immutable.js ??. Users should be able to achieve maximum performance simply using PureRenderMixin. > > * * * > > 譯：不能以正確的姿勢來使用immutable-js做優化，你就不要瞎折騰了，用它react-immutable-render-mixin就行了 它和ProComponent原理一樣，唯一的區別就是新舊數據的對比，react-immutable-render-mixin用了[immutable-js](https://github.com/facebook/immutable-js)的is()方法去做對比，性能強，復雜類型數據也能對比（這里不對immutable-js做討論，一篇很不錯的文章[Immutable 詳解及 React 中實踐](https://github.com/camsong/blog/issues/3)）,相比于React.PureComponent更方便---[源碼](https://github.com/jurassix/react-immutable-render-mixin/blob/master/src/shallowEqualImmutable.js) <br> <br> # 參考資料 [react如何通過shouldComponentUpdate來減少重復渲染](https://segmentfault.com/a/1190000016494335)