【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，可是会跳过更新流程的其余部分。

（未完待续）