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

SnaiLiu 发布于2019-08-22 18:29 / 489人阅读

摘要：当鼠标事件发生时，组件的最外层会进行处理，然后通过几层包装器的处理后，会开始进行批量更新操作。在这之后，会将这些事件处理成常见到样子。

接上文，

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

回到最初

在流程图中，也许你已经注意到，setState方法可以通过几种方式触发，更准确的说，可以分为是否由外部引起的（也就是是否由用户触发）。让我们看下如下两个列子，第一个中，
是由鼠标点击触发的，第二个中，是在componentDidMount中由setTimeout方法中被触发的。

为什么会有这些不同呢？如果你还有印象，在之前的文章中，React对于更新的处理是批量的，也就是说，一系列更新操作会通过某种方式被收集起来，然后统一刷新到页面上。当鼠标事件发生时，组件的最外层会进行处理，然后通过几层包装器的处理后，会开始进行批量更新操作。注意，批量更新操作的前提是确保ReactEventListener处于enabled状态，而且，在前文提到过，在组件的挂载阶段，ReactReconcileTransaction包装器中的一个会先关闭它，以确保整个挂载过程的安全。至于setTimeout中的调用，则是在将组件放入dirtyComponents列表之前，React会确保事务处于打开状态，在这之后，关闭事务包装器，然后将更新刷新到页面上。

正如你所知，React实现了合成事件，在一下原生事件包裹了一些合成语法糖。在这之后，React会将这些事件处理成常见到样子。看下如下代码里到注释：

为了更好地开发，通过模拟真实游览器事件，我们可以得到更好开发工具整合过程（To help development we can get better dev tool integration by simulating a real browser event’）

var fakeNode = document.createElement("react");

ReactErrorUtils.invokeGuardedCallback = function (name, func, a) {
      var boundFunc = func.bind(null, a);
      var evtType = "react-" + name;

      fakeNode.addEventListener(evtType, boundFunc, false);

      var evt = document.createEvent("Event");
      evt.initEvent(evtType, false, false);

      fakeNode.dispatchEvent(evt);
      fakeNode.removeEventListener(evtType, boundFunc, false);
};

回到我们的更新流程，我们在这里总结下大概的步骤：
1 调用setState方法
2 如果批量事务未处于开启状态，则打开该事务
3 将受影响组件添加到dirtyComponents列表里
4 通过调用ReactUpdates.flushBatchedUpdates方法关闭事务，也就意味着开始对dirtyComponents列表进行处理。

（未完待续）

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

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

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

【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-Part13】React源码解读

摘要：接着，将返回的元素和之前的进行比较的，以验证是否真的需要更新。我们看下代码，代码比较简单好，对应于我们的这个列子，我们对于方法的更改并不会对方法造成影响。所以我们进入下一步，也就是对于节点的更新。接上文， React流程图：https://bogdan-lyashenko.gith... 如果组件真的需要更新在组件刚开始更新过程时，如果有定义componentWillUpdate方...

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

摘要：接上文，流程图子组件挂载我们继续探究方法。对于我们的实例代码而言，就是标签，所以没有额外的处理过程。属性验证紧接着的被调用的验证方法用于确保被正确设置，否则，会抛出异常。接上文， React流程图：https://bogdan-lyashenko.gith... 子组件挂载我们继续探究mount方法。如果渲染的标签里有复杂的html标签，如video，form，textarea等...

evin2016 2019-08-22 18:23 评论0 收藏0