React 源码阅读笔记

[yinxin630]

// 定义一个组件, 如果是 class 组件, 会调用 React.Element 构造函数
function App() {
  return <h1>Hello World!</h1>
};

// 调用 createElement 实例化组件, 仅实例化 <App>, 不会递归向下继续调用 createElement
const elements = <App />;

// 此时会再调用 createElement 去实例化 <h1>
// render 有可选的第三个参数 callback, 当 render 结束时调用
ReactDOM.render(
  elements,
  document.getElementById('container')
);

Questions

1. React.Element 构造函数 function Component(props, context, updater) {} 第三个入参 updater 是什么?
   暂时还不了解作用
   源码注释说, 真正的 updater 是由 renderer 注入的. 但在 constructor 中打印 updater 是 undefined, 延伸问题: updater 到底是什么时候注入的?

2. ReactDom.render 是什么时候实例化 children(<h1>) 的?
   render 内部只做了些校验, 然后调用 legacyRenderSubtreeIntoContainer.
   legacyRenderSubtreeIntoContainer 首先基于 container 创建 root, 然后会调用 updateContainer 对其更新, 这个更新过程是 unbatched 的, 因为是初次更新, 要一次性完成
   updateContainer 是 reconciler 的一部分, 获取 current 和 update, 然后调用 enqueueUpdate 进行将更新加入队列, 最后调用 scheduleUpdateOnFiber 将更新应用至真实 dom

3. <h1>Hello World! <span>111</span> end</h1>, 该代码为什么 createElement 创建 <h1> 时 children 只有 Hello World! ? 其它 children 是怎么渲染出来的

4. Fiber 队列中的更新是什么时候出队的?