【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节点的更新。
（未完待续）