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

2023年4月7日 76次阅读 来源: 剡山

接上文，

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列表举行处置惩罚。

（未完待续）

    原文作者：剡山
    原文地址: https://segmentfault.com/a/1190000015472792
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞