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

jerryloveemily 发布于2019-08-22 18:32 / 3184人阅读

摘要：接着，将返回的元素和之前的进行比较的，以验证是否真的需要更新。我们看下代码，代码比较简单好，对应于我们的这个列子，我们对于方法的更改并不会对方法造成影响。所以我们进入下一步，也就是对于节点的更新。

接上文，

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

GPU云服务器云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95966.html

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

摘要：方法实际会操作两件事在前一个和下一个的基础上，更新属性和更新的子元素。对于更新属性，我们在之前已经分析了如果还有印象，它就是用来处理元素的属性，样式，事件监听器等等。下一步，我们就分析下遗留的方法未完待续接上文， React流程图：https://bogdan-lyashenko.gith... 接收组件（更准确的说，是接收新元素）通过ReactReconciler.receive...

Cobub 2019-08-22 18:32 评论0 收藏0
【Under-the-hood-ReactJS-Part11】React源码解读

摘要：技术上来说，当方法被调用后或者发生改变后，方法都会被调用。下一步，会设置为。之后，检测当前更新是否由更新引起的。这是因为，使用是导致组件持久化更新，而会被方法的返回值重新赋值。接上文， React流程图：https://bogdan-lyashenko.gith... 更新组件关于组件的更新，我们先看下代码里的注释：对于已挂载组件的更新过程，React会首先调用component...

hiyayiji 2019-08-22 18:30 评论0 收藏0
【Under-the-hood-ReactJS-Part8】React源码解读

摘要：接上文，流程图我们已经知道挂载的工作流程，现在我们换个方向研究下方法，这个也是的重要组成部分。这个问题，我们会在下一篇文章中进行解答。。。接上文， React流程图：https://bogdan-lyashenko.gith... this.setState 我们已经知道挂载的工作流程，现在我们换个方向研究下--setState方法，这个也是React的重要组成部分。首先，为什么我...

zhoutk 2019-08-22 18:25 评论0 收藏0
【Under-the-hood-ReactJS-Part6】React源码解读

摘要：源码里有个独立的模块管理组件的所有子元素。第一个，实例化子元素使用并挂载它们。至于具体挂载流程，基于子元素类型的不同而有不同的挂载过程。挂载的过程基本完成了。接上文， React流程图：https://bogdan-lyashenko.gith... 创建初始子组件在之前的步骤里，组件本身的构建已经完成，接下去，我们分析它们的子元素。总共分为两步：挂载子元素（this.mountC...

codergarden 2019-08-22 18:24 评论0 收藏0
【Under-the-hood-ReactJS-Part9】React源码解读

摘要：当鼠标事件发生时，组件的最外层会进行处理，然后通过几层包装器的处理后，会开始进行批量更新操作。在这之后，会将这些事件处理成常见到样子。接上文， React流程图：https://bogdan-lyashenko.gith... 回到最初在流程图中，也许你已经注意到，setState方法可以通过几种方式触发，更准确的说，可以分为是否由外部引起的（也就是是否由用户触发）。让我们看下如下...

SnaiLiu 2019-08-22 18:29 评论0 收藏0