react 的性能优化

一、性能永远是第一需求，时刻考虑性能问题

1. 如何避免应用出现性能问题，如下所示：

• 了解常见的性能问题场景
• 时刻注意代码的潜在性能问题
• 注重可重构的代码
• 了解如何使用工具定位性能问题

二、网络性能优化，自动化按需加载

1. 如何在 React 中实现按需加载，如下所示：

• 什么是按需加载
• 使用 webpack 的 import API
• 使用 react-loadable 库实现 React 异步加载

三、使用 Reselect 避免重复计算

1. Reselect，创建自动缓存的数据，处理流程

四、下一代 React，异步渲染

1. 异步渲染的两个部分，如下所示：

• 时间分片，DOM 操作的优先级低于浏览器原生行为，例如键盘和鼠标输入，从而保证操作的流畅
• 渲染挂起，虚拟 DOM 节点可以等待某个异步操作的完成，并指定 timeout，之后才完成真正的渲染

2. 对于时间分片，如下所示：

• 虚拟 DOM 的 diff 操作可以分片进行
• React 新 API，unstable_deferredUpdates
• Chrome 新 API，requestldleCallback

3. 对于渲染挂起，如下所示：

• 新内置组件，Timeout
• unstabel_deferUpdate

五、使用 Chrome DevTool 进行性能调优

1. 借助工具发现性能问题，如下所示：

• 使用 React DevTool 找打多余渲染
• 使用 Chrome DevTool 定位性能瓶颈