react优化

1、代码层面
2、webpack优化
3、其他tips

http://www.alloyteam.com/2016/06/react-isomorphic/ react优化
https://github.com/lcxfs1991/blog/issues/7 webpack优化

代码层面

• shouldComponentUpdate,判断props,state是否变化决定是否渲染
• 使用pureComponent,如果propsstate没变直接不会触发render.
• store/model的拆分,提高代码复用率，降低判断shouldComponentUpdate的复杂度. immutablejs报错数据不变，提高对比速度。

• 同理如果使用mobx，也会保持数据不变，不会触发update声明周期，但是会触发receive。

• 拆分组件，设置良好的目录结构，提高重用，代码可读，打包体积。
• 拆分路由

webpack优化

• 打包速度

• 拆分react zepto作为公用lib，直接cdn引用。

• 拆分入口，多输出
• 合并公用lib，合并组件

其他tips

• 请慎用setState，因其容易导致重新渲染
  • 既然将数据主要交给了Redux来管理，那就尽量使用Redux管理你的数据和状态state，除了少数情况外，别忘了shouldComponentUpdate也需要比较state。
• 请将方法的bind一律置于constructor
  • Component的render里不动态bind方法，方法都在constructor里bind好，如果要动态传参，方法可使用闭包返回一个最终可执行函数。如：showDelBtn(item) { return (e) => {}; }。如果每次都在render里面的jsx去bind这个方法，每次都要绑定会消耗性能。
• 请只传递component需要的props
  • 传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，也请慎用spread attributes（）。
• 请尽量使用const element
  • 这个用法是工业聚在React讨论微信群里教会的，我们可以将不怎么变动，或者不需要传入状态的component写成const element的形式，这样能加快这个element的初始渲染速度。