react框架執行的原理：介面受到資料驅動，state 和 props 的改動會造成介面的改動。其中，state 是自身的屬性，props 是父元件提供的引數。如果介面內容很多，很小的資料變化會造成介面的重繪，那麼造成效能的浪費。下面從幾個方面總結一下如何避免重新渲染。
state是乙個元件內部的屬性。如果state變化，那麼元件必然會 re-render。如果乙個元件是靜態單項元件（不涉及使用者輸入操作），避免 state 使用。如果介面中需要使用變數進行計算，可以使用屬性（this.name）來代替state等。
如果不同 state 可以計算得出，直接計算推理，儘量減少 state 的數量。只有涉及使用者互動的地方或者上下元件傳值的地方才使用 state。
總之，state 越少越好。
props 是父元件向子元件傳值的方式。如果父元件傳遞的 props 發生變化，那麼子元件會重新渲染。所以，父元件傳遞的props可以優化，子元件需要什麼，父元件再傳遞什麼props。
元件化是react的重要思想。元件化不僅可以使得**復用，同時可以優化效能。將介面上的功能區分成不同的元件。當某個資料發生變化，只更新一部分元件，其他元件不受影響，這樣可以優化效能。
盡量使用無狀態元件（資料由外部提供，內部沒有使用者資料互動行為等）。這部分元件就是單獨的一部分，不受到外界的資料改變的影響。
生命週期函式需要熟記在心，使用react要時刻想到生命週期函式。
在 componentwillupdate 和 componentdidupdate 階段，介面資料的處理可能會造成介面再次渲染。如果涉及遞迴等**會造成很大的效能浪費。
在componentdidmount 階段可以處理很多資料。
通過 shouldcomponentupdate 中判斷，如果元件傳來的props相同，那麼返回 false 不需要進行介面重新渲染。前後不改變state值的setstate（理論上）和無資料交換的父元件的重渲染都會導致元件的重渲染，但你可以在shouldcomponentupdate這道兩者必經的關口阻止這種浪費效能的行為。
react.purecomponent 的基礎類可以對比props的差異。
使用immutable.js 的不可變資料。
React 避免重渲染
我們可以在 react 元件中的 props 和 state 存放任何型別的資料，通過改變 props 和 state，去控制整個元件的狀態。當 props 和 state 發生變化時，react 會重新渲染整個元件，元件重新渲染的過程可簡化如下圖 譯者之前對diff的理解是，對於乙個改變 prop...
React 效能優化
避免重複渲染 當乙個元件的props或者state改變時，react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時，react會更新dom。在一些情況下，你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度，它是在重新渲染過...
react 效能優化
在shouldcomponentupdate 方法中判斷props和state是否改變，若未改變則無需渲染。有些情況如父元件的props或state改變了，但是子元件其實未改變，若不判斷的話會導致子元件一起被渲染。shouldcomponentupdate nextprops nextstate r...