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

接上文，

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

若是组件真的须要更新

在组件刚开始更新过程时，若是有定义componentWillUpdate方法，则会进行调用。以后，会重绘组件并将对于componentDidUpdate方法的调用压入队列（React会延迟这个方法的调用，由于这个方法须要在更新过程的最后被调用）。
对于重绘过程，就是调用组件的render方法，而后根据返回值更新DOM。具体过程以下，第一步，调用组件实例（ExampleApplication）的render方法而后将结果保存下来（调用render方法会返回React元素）。接着，将返回的元素和以前的进行比较的，以验证DOM是否真的须要更新。

上面的过程是否是很熟悉？没错，这个就是React的看家本领了，虚拟DOM，避免对于DOM的无用更新，提升了整个React的性能。看下代码里对shouldUpdateReactComponent的注释：

决定当前的实例是否须要更新，或者销毁而后用新的实例替换

大体说来，这个方法就是用来检测当前元素是否须要被彻底替换，换句话说，老的元素应该首先被卸载，而后，新元素（render方法的返回）应该被挂载并作标记，而后接收到的mount方法的返回值，应该会被用于替换当前DOM上的元素，或者，若是元素只须要部分更新，那就按需进行更新。当如下场景发生时，一般是须要彻底替换元素的：新元素不包含任何东西（在render方法里被移除了）或者元素类型彻底不一样。好比，原先是div，可是如今变成了其余标签。咱们看下代码，代码比较简单：

///src/renderers/shared/shared/shouldUpdateReactComponent.js#25

function shouldUpdateReactComponent(prevElement, nextElement) {
    var prevEmpty = prevElement === null || prevElement === false;
    var nextEmpty = nextElement === null || nextElement === false;
    if (prevEmpty || nextEmpty) {
        return prevEmpty === nextEmpty;
    }

    var prevType = typeof prevElement;
    var nextType = typeof nextElement;
    if (prevType === 'string' || prevType === 'number') {
        return (nextType === 'string' || nextType === 'number');
    } else {
        return (
            nextType === 'object' &&
            prevElement.type === nextElement.type &&
            prevElement.key === nextElement.key
        );
    }
}

好，对应于咱们的ExampleApplication这个列子，咱们对于state方法的更改并不会对render方法形成影响。因此咱们进入下一步，也就是对于DOM节点的更新。
（未完待续）