這幾天陸陸續續看了一些關於react效能優化的部落格，大部分提到的都是react 15.3新加入的purecomponent ，通過使用這個類來減少react的重複渲染，從而提公升頁面的效能。使用過react的朋友都知道，react元件只有在state和props發生改變時才會觸發render，如果state和props沒有發生改變，render就不執行。通常在寫頁面的時候，如果沒有使用purecomponent類，為了避免重複渲染而產生的效能問題，我們會使用shouldcomponentupdate手動來比較頁面是否需要重新渲染，這時我們是可以進行深比較的，也就是將當前的state與nextstate或者props與nextprops一層一層進行比較，如果比較發現不相等，這個函式就返回true從而使元件重新渲染，如果比較後發現值沒有改變則返回false來阻止元件重新渲染。當我們使用了purecomponent類後，就不再需要手動檢查元件是否需要重新渲染了，因為purecomponent會幫我們檢查state和prop是否發生改變，從而決定是否要呼叫render方法，從而提高效能。但是需要注意的是，使用purecomponent時，react只是做了最外層的淺比較：
if (this._compositetype === compositetypes.pureclass)
shadowequal只會淺檢查元件的props和state，所以巢狀物件和陣列是不會被比較的。所以使用了purecomponent的時候，我們要特別注意這一點。
好了，今天要分享的除了上面的關於purecomponent的原理外，還要分享一篇關於react效能優化的乾貨部落格，
英文原文： react performance fixes on airbnb listing pages:
譯文：airbnb 愛彼迎**詳情頁中的 react 效能優化:
React 效能優化
避免重複渲染 當乙個元件的props或者state改變時，react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時，react會更新dom。在一些情況下，你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度，它是在重新渲染過...
react 效能優化
在shouldcomponentupdate 方法中判斷props和state是否改變，若未改變則無需渲染。有些情況如父元件的props或state改變了，但是子元件其實未改變，若不判斷的話會導致子元件一起被渲染。shouldcomponentupdate nextprops nextstate r...
React效能優化
一 事件的優化 1 建構函式中宣告 export default mycom extends component render fun 此中方式只會在建構函式中建立一次，效能最好，但無法傳值 2 在元件中宣告 export default mycom extends component fun 該方...