react 性能优化

思路

• 使用工具来分析性能瓶颈

• 尝试使用优化技巧解决这些问题

• 使用工具测试性能是否确实有提升

方式

• Code Splitting

1. 打包、分割代码、提取重复公共部分
2. 动态导入 异步加载 （react的高阶组件 react-loadable 进行动态import）

• shouldComponentUpdate避免重复渲染

1. PureComponent

• 使用不可突变数据结构

1. 数组使用concat,对象使用Object.assign()
2. ...
3. immutable

• 组件尽可能的进行拆分、解耦

• 列表类组件优化

• bind函数优化

• 不要滥用props

• ajax请求放在(componentDidMount)中,因为componentDidMount生命周期的话,打开只会渲染一次,这样会大大的提高了性能

• 代码、逻辑方面

1. 少用多层循环嵌套、注意map、 for、 for in、for of、filter的区别 及时跳出循环
2. new Array（1000）.fill（‘’）配合正则、数组去重等