說到 react 元件，肯定離不開元件的 props 和 state，我們可以在 props 和 state 存放任何型別的資料，通過改變 props 和 state，去控制整個元件的狀態。當 props 和 state 發生變化時，react 會重新渲染整個元件
當元件的 props 或 state 變化，react 將會構建新的 virtual dom，使用 diff 演算法把新老的 virtual dom 進行比較，如果新老 virtual dom 樹不相等則重新渲染，相等則不重新渲染。dom 操作是非常耗時的，這導致重新渲染也非常的耗時，因此要提高元件的效能就應該盡一切可能的減少元件的重新渲染。
事實上根據 react 的更新規則，只要元件的 props 或 state 發生了變化就會重新渲染整個元件，這對效能是乙個很大的浪費。如果對於複雜的頁面，這將導致頁面的整體體驗效果非常差。因此要提高元件的效能，就應該想盡一切方法減少不必要的渲染。
如果乙個元件只和 props 和 state 有關係，給定相同的 props 和 state 就會渲染出相同的結果，那麼這個元件就叫做純元件，換一句話說純元件只依賴於元件的 props 和 state，下面的**表示的就是乙個純元件。
render()
);}
函式預設返回為 true，表示在任何情況下都進行重新渲染的操作，要減少重新渲染，只需要在一些不必要重新渲染的時候，使得函式的返回結果為 false。如果使得函式的結果一直為 false，這樣不管元件的狀態怎麼變化，元件都不會重新渲染，當然一般情況下沒有人會這樣幹。
react 官方提供了 purerendermixin 外掛程式，外掛程式的功能就是在不必要的情況下讓函式 shouldcomponentupdate 返回 false, 使用這個外掛程式就能夠減少不必要的重新渲染，得到一定程度上的效能提公升，其使用方法如下：
import purerendermixin from 'react-addons-pure-render-mixin';
class foocomponent extends react.component
render()
}
shouldcomponentupdate(nextprops, nextstate)shouldcomponentupdate(nextprops, nextstate)在 react 的最新版本裡面，提供了 react.purecomponent 的基礎類，而不需要使用這個外掛程式。
假設在每乙個元件中都使用 purerendermixin 這個外掛程式，我們來看一下使用這個外掛程式後的狀態的比較過程。假設我們有乙個元件如下：
上圖的比較是簡單物件的比較，比較過程非常簡單而且快速。但是如果是比較複雜的物件的比較，比如日期、函式或者一些複雜的巢狀許多層的物件，這些會比較耗時，甚至沒法進行比較。
其實我們自己可以重寫 shousldcomponentupdate 這個函式，使得其能夠對任何事物進行比較，也就是深比較（通過一層一層的遞迴進行比較），深比較是很耗時的，一般不推薦這麼幹，因為要保證比較所花的時間少於重新渲染的整個元件所花的時間，同時為了減少比較所花的時間我們應該保證 props 和 state 盡量簡單，不要把不必要的屬性放入 state，能夠由其他屬性計算出來的屬性也不要放入 state 中。
對於複雜的資料的比較是非常耗時的，而且可能無法比較，通過使用 immutable.js 能夠很好地解決這個問題，immutable.js 的基本原則是對於不變的物件返回相同的引用，而對於變化的物件，返回新的引用。因此對於狀態的比較只需要使用如下**即可：
shouldcomponentupdate()動靜分離
假設我們有乙個下面這樣的元件：
對於巢狀多層、複雜的元件，元件的子節點很多，元件的更新的時間也將花費更多，並且難於維護，資訊流從上往下由父元件傳遞到子元件單向流動，這可能會導致元件失去我們的控制。
children change over time
有如下的乙個元件（現實中沒人會這樣寫，這只是乙個 demo），元件每1秒渲染一次。
class parent extends component
render()
; }
}setinterval(() => , 1000);
讓我們來看一下，children 的具體結構，如下圖：
children 是乙個比較複雜的物件，每次元件更新的時候都會重新構造，也就是說 children 是動態構建的，因此每次更新的時候都是不相等的。所以 shouldcomponentupdate每次都會返回 false，因此元件每次都會重新渲染。可以用乙個變數來代替 childdren，這樣每次構造的也會是相同的物件。
independent children
再來看乙個非常愚蠢的元件，如下：
class twocolumnsplit extends component
render() );}
}
我們也可以通過元件的容器來隔離外界的變化。容器就是乙個資料層，而元件就是專門負責渲染，不進行任何資料互動，只根據得到的資料渲染相應的元件，下面就是乙個容器以及他的元件。
class budgetcontainer extends component
computestate()
render()
}
設想一下，如果設計師覺得這個元件需要移動位置，你不需要做任何的更改只需要把元件放到對應的位置即可，我們可以把它移到任何地方，可以放在不同的應用中，同時也可以應用於測試，我們只需要關心容器的內部的資料的**即可，在不同的環境中編寫不同的容器。
purity => use shouldcomponentupdate & purerendermixin
data comparability => use highly comparable data (immutability)
loose coupling => use for maintainability and performance
children => be careful of children, children create deep update,
children are always change, we should insulate them from parent
參考資料
react advanced-performance
react 應用的效能優化
redux學習筆記
流程如下 在redux中使用者的操作並不會直接導致view層的更新，而是view層發出actions通知出發store裡的reducer從而來更新state state的改變會將更新反饋給我們的view層，從而讓我們的view層發生相應的反應給使用者。redux中有三個基本概念，action，red...
Redux學習筆記
redux 對於通訊工程專業的來說可以這麼理解 在不用redux的時候，元件中的資訊傳遞就好像我通過用嘴巴說的方式向你傳遞資訊，但是當周圍環境比較嘈雜資訊比較多或者我距離你比較遠的時候，資訊的傳遞就比較費勁了，一句兩句還好，多了肯定會很累。那麼redux是個什麼存在呢？他就像乙個基站，我和大家的所有...
redux 學習筆記
學習資料 英文文件 中文文件 github redux是乙個專門用於做狀態管理的js庫 不是react外掛程式庫 它可以用在react,angular,vue等專案中,但基本與react配合使用。作用 集中式管理react應用中多個元件共享的狀態。某個元件的狀態，需要讓其他元件可以隨時拿到 共享 乙...