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(<Component {…props} />)。
  • 请尽量使用const element
    • 这个用法是工业聚在React讨论微信群里教会的,我们可以将不怎么变动,或者不需要传入状态的component写成const element的形式,这样能加快这个element的初始渲染速度。

推荐阅读更多精彩内容