react將dom抽象為虛擬dom，通過新舊虛擬dom這兩個物件的差異（diff演算法），最終只把變化的部分重新渲染。提高渲染效率的過程；
Diff演算法
當你實際開發使用react的時候，某個時間點render()函式建立了一顆React元素樹，也就模擬一個虛擬dom樹，
在下一個state或者props更新的時候，render()函式將建立一顆新的React元素樹，也就模擬了一個新的虛擬dom樹
Tree Diff
將新舊兩顆虛擬dom樹，按照層級對應的關係，從頭到尾遍歷一遍，就能找到哪些元素是需要更新的。
react元件劃分
UI組價負責UI的呈現，容器元件負責管理資料和邏輯；兩者通過react-redux提供的connect方法聯絡起來。
為什麼虛擬dom會提高效能
虛擬dom相當於在js和真實dom中間加了一個快取，利用dom diff演算法避免了不必要的dom操作，從而提高效能。
diff演算法
把樹形結構按照層級分解，只比較同級元素。
給列表結構的每個同源新增唯一的key屬性，方便比較。
react優化
程式碼層面的優化：
shouldComponentUpdate（判斷是否需要呼叫render方法重新描繪dom）和PureComponent，避免過多render function
不要直接改變setState資料，每次返回一個新的值，不要改變原來的值；
將props和state攤平，只傳遞component需要的props
程式碼體積的優化:
使用生產版本；
使用動態import,懶載入react元件；
使用babel-plugin-import優化業務元件的引入，實現按需載入；
使用key來幫助react識別列表中所有子元件的最小變化；
元件封裝
扁平化設計資料，用純元件，減少不必要的render,命名規範，寫好對外介面，考慮健壯性，按需載入，高內聚，低耦合。
props和state:
同：
都會引發render的重新渲染
都可以自身設定初始值
異：
初始值：state來源getInitialState(constructor)函式，props來源於父元件或getDefaultProps
修改方式：只能setState,不能由父元件；props只能由父元件修改
對子元件：props是一個父元件傳遞給子元件的資料流。可以一直傳遞到子孫元件。state代表的是一個元件內部自身的狀態，只能在自身組建中存在
Redux
action：使用者觸發的一個普通物件
reducer:根據action操作來做出不同的資料響應，返回一個新的state
store值由reducer確定