执行的代码
为了更深入的了解 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
网友评论