谈谈怎么读 React 源码（二）render 过程

项目实操2024-01-10 网络

接上文。说到了 ReactDOM.render()三阶段的第二阶段：render 阶段的调用栈【这是重中之重！】\n⚽️createWorkInProgress() 创造一个新的 rootFiber，和旧的互为 alternate。顺带了解一下 fiber 树的链表结构：child 第一个子节点，return 父节点，sibling 第一个兄弟节点；双缓冲树：current 树是稳定的，workInProgress 树是执行状态更新的。\n⚽️workLoopSync() 反复调用 performanceUnitOfWork() 。其实是用循环完成了以前的递归。能说出是怎么循环的。其实就是一个树的循环遍历，多看看多想想能想出来。\n⚽️beginWork() 调用 ChildReconciler()，最终调用 renderWithHooks()生成该 fiber 节点的所有子节点，并返回第一个子节点。\n⚽️completeWork() 处理 Fiber 节点到 DOM 节点的映射逻辑。用 createInstance 创建 DOM 节点，用 appendAllChildren 把 DOM 节点插入 DOM 树，用 finalizeIntialChildren 给 DOM 节点设置属性，最后把 DOM 节点储存进 fiber 节点的 stateNode 属性。\n⚽️completeUnitOfWork() 先用 completeWork 处理节点，然后检查是否有兄弟节点，如果有则返回（直接返回到 workLoopSync，beginWork 下一个 workInProgress 节点），如果没有则回溯到父节点，重新从处理。\n（我知道这块说的有点绕，我放了一个模拟代码在图 2）\n⚽️同时 completeUnitOfWork 还有一个作用，把当前节点的副作用链插入到父节点的副作用链中。副作用链的目标就是找出界面中需要处理的更新。\n副作用链用 firstEffect 存储头节点，lastEffect 存储尾节点，nextEffect 指向下一个出现副作用的父节点。\n（听起来有点绕，打断点自己看源码结构就很清楚了）\n#前端学习 #前端面试题总结 #前端工程师 #前端面试 #web前端