React-实用性能优化技巧

本文的demo仓库在https://github.com/qiqingjin/blog/tree/master/React_Redux/demos，喜欢请star哟~

你可能听过一句话，过早的优化是万恶之源。项目开始，我们当然会首先考虑功能的实现，当完成第一版功能以后，就应该尽早开始优化和重构了。

工具

如果我们不去测量项目目前运行的速度，就无法知道后续进行的优化是否有效、效果有多少。下面介绍几个常用的测量React性能的工具。

• Why did you update
• Chrome Performance Tab
• React Profiler

原则

每当组件state或者props更新时，react会对虚拟dom树进行一次“对比”，保留没有改变的节点，更新改变了的节点。这个过程被称为调和（Reconciliaton）。大致过程如下：

1. 节点类型不同（比如：div与span），直接执行更新
2. 节点类型相同，如果是DOM元素（div等），则对比属性和内容，不一致的地方进行更新
3. 节点类型相同，如果是React组件，更新虚拟dom，再进行子节点对比，原则重复1-3

使用key

当遍历一个数组，渲染一组数据时，应该为每个item增加key。如果不使用key，react控制台会给我们提示。增加key可以优化调和过程。

不要随意修改组件的容器html的类型

从上述调和过程可以看出，如果容器的html类型不同，react会跳过调和，直接进行重新渲染。如果没有必要，不要在render中根据state或者props的不同，修改容器的html类型。

shouldComponentUpdate

有些特殊情况，调和过程是不必要的。例如一个TodoList组件有子组件TodoItem，TodoItem只有在props.text或者props.completed改变时，才需要渲染，那么其他props 的改变引起的调和过程就是不必要的。

为了避免这种情况，react提供了shouldComponentUpdate方法。在调和过程发生之前，react会先调用组件的该方法，如果该方法返回false，则此次调和终止，如果返回true则继续。默认这个方法返回true。官方介绍参考 https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action 。

如果我们明确知道，只有哪些state和props改变，才应该引起组件的更新时，我们应该实现这个生命周期函数，避免不必要的调和过程。对于object类型，建议试用浅比较进行对比，过深的比较与一次调和相比，可能反而更浪费时间。