React 18 源码学习笔记 1 createRoot

2022-08-21 本文已影响0人吴摩西

执行的代码

为了更深入的了解 react 机制，通过执行下面的代码来进行 debug，本代码来自 react 源码中的 fixtures/packaging/babel-standalone/dev.html

<html>
  <body>
    <script src="../../../build/node_modules/react/umd/react.development.js"></script>
    <script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <div id="container"></div>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.getElementById('container'));
      root.render(<h1>Hello World!</h1>);
    </script>
  </body>
</html>

createRoot

本部分主要关注 createRoot 的步骤

可见整个调用如下：

Screen Shot 2022-08-21 at 8.14.11 PM.png

createRoot 的基本过程

Screen Shot 2022-08-21 at 8.04.51 PM.png

生成的 FiberRootNode

Screen Shot 2022-08-21 at 8.23.40 PM.png

可以看到，主要的操作是给 container 添加 event listener，添加了 81 种事件的监听，除了 selectionchange 以外都是在捕获阶段 (CapturePhase)，而对于 selectionchange 有所标注 We handle selectionchange separately because it doesn't bubble and needs to be on the document. 通过代码我们知道，有 30 种事件是不能代理的：

Screen Shot 2022-08-21 at 8.35.01 PM.png