React性能优化资料（文章）搜集整理

第一次查阅文章-2018-01-04

资料整理

最近公司做了一个项目，需要前端做一些优化，查阅了一些资料，放在这里，以文章为主，留作以后参考。
React性能优化总结—segmentfault
React性能优化总结—github
React移动web极致优化—github(腾讯全端 AlloyTeam 团队)
使用Perf工具研究React Key对渲染的影响
React组件性能调优—react-china

知识整理

1. 虚拟DOM比较的时机

• 生成虚拟DOM并进行比对发生在render()后，而不是render()前。
• 进入render并不意味着一定会重新渲染，也许仅进行了虚拟DOM比较，即diff算法。

2. [优化点1]在diff算法执行前比较state和props，确定是否进行虚拟DOM比较。

• shouldComponentUpdate函数，return false，就不会进入render()函数，也不会进行虚拟DOM的对比。

3. [优化点2]map里面添加key，并且key不要使用index（可变的）。

• 使用Perf工具研究React Key对渲染的影响这篇文章详细讲解了为什么不用的原因，但是因为项目React版本号太高，导致不能运行性能检测工具（React.addons.Perf），使用index作为key，确实会导致很多问题，不仅仅是性能方面。

4. [优化点3]使用immutable

• 因为项目已经基本开发完成，将models中的数据更改为immutable工程量太大，这一次没有做这部分的优化。

优化效果

1. 今天下午试了一下优化效果，使用同步服务大量更新model，更新2000+次。

• 使用performance记录的情况下，如果没有shouldComponentUpdate优化，时间在40+s
• 使用performance记录的情况下，有shouldComponentUpdate优化，时间在30s左右。