1泊业、代碼層面
2最域、webpack優(yōu)化
3、其他tips
http://www.alloyteam.com/2016/06/react-isomorphic/ react優(yōu)化
https://github.com/lcxfs1991/blog/issues/7 webpack優(yōu)化
代碼層面
- shouldComponentUpdate,判斷props,state是否變化決定是否渲染
- 使用pureComponent,如果propsstate沒變直接不會觸發(fā)render.
- store/model的拆分,提高代碼復用率，降低判斷shouldComponentUpdate的復雜度. immutablejs報錯數(shù)據(jù)不變苞冯，提高對比速度。
- 同理如果使用mobx侧巨，也會保持數(shù)據(jù)不變舅锄，不會觸發(fā)update聲明周期，但是會觸發(fā)receive司忱。
- 拆分組件皇忿，設(shè)置良好的目錄結(jié)構(gòu)，提高重用坦仍，代碼可讀鳍烁，打包體積。
- 拆分路由
webpack優(yōu)化
- 打包速度
- 拆分react zepto作為公用lib繁扎，直接cdn引用幔荒。
- 拆分入口糊闽，多輸出
- 合并公用lib，合并組件
其他tips
- 請慎用setState爹梁，因其容易導致重新渲染
- 既然將數(shù)據(jù)主要交給了Redux來管理右犹，那就盡量使用Redux管理你的數(shù)據(jù)和狀態(tài)state，除了少數(shù)情況外姚垃，別忘了shouldComponentUpdate也需要比較state念链。
- 請將方法的bind一律置于constructor
- Component的render里不動態(tài)bind方法，方法都在constructor里bind好莉炉，如果要動態(tài)傳參钓账，方法可使用閉包返回一個最終可執(zhí)行函數(shù)。如：showDelBtn(item) { return (e) => {}; }絮宁。如果每次都在render里面的jsx去bind這個方法梆暮，每次都要綁定會消耗性能。
- 請只傳遞component需要的props
- 傳得太多绍昂，或者層次傳得太深啦粹，都會加重shouldComponentUpdate里面的數(shù)據(jù)比較負擔，因此窘游，也請慎用spread attributes（<Component {…props} />）唠椭。
- 請盡量使用const element
- 這個用法是工業(yè)聚在React討論微信群里教會的，我們可以將不怎么變動忍饰，或者不需要傳入狀態(tài)的component寫成const element的形式贪嫂，這樣能加快這個element的初始渲染速度。
