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的初始渲染速度。
网友评论