【Under-the-hood-ReactJS-Part11】React源码解读

接上文，

React流程图：
https://bogdan-lyashenko.gith...

更新组件

关于组件的更新，我们先看下代码里的注释：

对于已挂载组件的更新过程，React会首先调用componentWillReceiveProps和shouldComponentUpdate这两个方法。然后，在更新没有跳过的前提下，剩下的有关更新的生命周期方法会被调用，在这之后，DOM节点会被最终更新。默认情况下，DOM的更新会使用React中的虚拟DOM算法，有特殊需求的客户端可能需要覆盖相关实现。（‘Perform an update to a mounted component. The componentWillReceiveProps and shouldComponentUpdate methods are called, then (assuming the update isn’t skipped) the remaining update lifecycle methods are called and the DOM representation is updated. By default, this implements React’s rendering and reconciliation algorithm. Sophisticated clients may wish to override this.’）

看起来还是比较合理的一个过程。

以上过程中，我们做的第一件事就是检测props是否改变。技术上来说，当setState方法被调用后或者props发生改变后，updateComponent方法都会被调用。如果props真的发生了改变，那么生命周期方法componenttWilllReceiveProps就会被调用。之后，React会基于阻塞状态队列（我们之前设置的存放局部state的队列，在我们的例子里会像这个样子：[{message:"click state message"}]）里的state重新计算nextState，当然，如果只是props发生了改变，那么state相关操作不会被执行。

下一步，React会设置shouldUpdate为true。这个也是为什么默认情况下我们不需要重写shouldComponentUpdate方法的原因，React中，组件就是默认更新的。之后，检测当前更新是否由forceUpdate更新引起的。 更新一个组件，除了更改state和props外，也是可以通过调用forceUpdate方法来实现的，但是，React官方文档里认为应该避免使用这个方法。这是因为，使用forcuUpdate是导致组件持久化更新，而shouldUpdate会被shouldComponentUpdate方法的返回值重新赋值。如果最终判断组件是不需要被更新的，React还是会设置props和state，但是会跳过更新流程的其他部分。

（未完待续）