执行的代码
为了更深入的了解 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.pngcreateRoot 的基本过程
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 种事件是不能代理的:
网友评论