react 性能优化

[oliver1204]

使用生产版本

1. 生产环境是用生产版本，React开发版本 默认包含了许多有用的警告信息。这些警告信息在开发过程中非常有帮助。然而这使得 React 变得更大且更慢，所以你需要确保部署时使用了生产版本。

尽量使用单页应用

下图是使用react-router 构建的项目，在 Chrome 的 Performance 下 观察到的初始渲染所需要的时间：

)

跳转每个界面，渲染react-router 组件都需要浪费50%以上的时间。

使用react-tools

对于react 16.0 以上的版本，react-tools 添加了 Profiler 项。在页面更新时，变化部分会有彩色的框框。如下：

通过分析我们知道，在切换「积分排名」和「积分明细」时， 其实上部分是没有必要变化的。 虽然 react 有 VDom ,但是尽量避免非要的更新对于复杂的项目还是有很大的好处的。