mini-react游戏副本-好玩的学习方式

背景

参与mini-react 游戏副本

---

收获

1. 学习方法（把任务拆分到很细、每天进步一点点）
2. 一定不能边看视频边敲代码（会失去主动思考的能力）
3. 一群人一起完成同样的任务会碰撞出不同火花
4. 配合滴答清单一点一点完成任务很有成就感

---

总结

mini-react的渲染流程（函数组件）
1、执行 React.createRoot()：创建一个 React 根节点，并返回一个 render 函数。
2、传入 App 函数组件：将 App 函数组件作为参数传递给 render 函数。
3、我们所写的jsx函数组件代码会通过vite转换成render function的形式执行后得到vdom

return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Todos, null)); 

4、赋值 wipRoot 和 nextWorkOfUni：创建当前的工作根节点 wipRoot 和下一个更新的单位 nextWorkOfUni。
5、执行 workLoop：使用 requestIdleCallback 方法执行工作循环 workLoop。
6、转换成 Fiber 结构：通过 performWorkOfUnit 将 App 函数组件转换成 Fiber 结构。在处理函数组件时，会执行 updateFunctionComponent，并通过 reconcileChildren 进行子节点的比较和标记。
7、执行 commitRoot 和 commitWork：递归执行 commitRoot 和 commitWork，根据 effectTag 标记将 DOM 进行新增（append）或更新（updateProps）操作，最终将 DOM 渲染到页面上。
8、我们在执行useState的时候会在对应的fiber赋值stateHooks，组件触发setState会给 wipRoot 和 nextWorkOfUni赋值，又会利用任务调度器workLoop，重新走5、6、7重新渲染组件
9、我们在使用useEffect的时候也会在对应的fiber赋值effectHooks,在处理完commitRoot之后会处理commitEffectHooks