筆記

前言 📝

👉 一、实现一个 useState 二、react 生命周期 三、effect 第二个参数的影响

---

实现一个 useState 🤖

• 見 useSate

---

react 生命周期

this.setState-->reconcile 算法（diff 算法）计算出变化状态 即 render 阶段--->reactDom 渲染器讲状态变换渲染到视图 commit 阶段

首次 render 时：

调用 this.setData()时

• render 阶段：

  构建 fiber 树： 1、自上而下，深度遍历的方式创建，先儿子后兄弟的创建最后回到根节点 2、每创建完一个节点，执行 render 阶段 的方法 constructor-->getDerivedstateFromProps/componentWillMount-->render

• commit 阶段：

  fiber 树渲染到 Dom，会从子节点开始执行生命周期函数 componentDidMount 直到根组件

调用 this.setData()时

• render 阶段：

  1、复用之前的节点创建一棵 fiber 树，不会执行节点的生命周期 经过 diff 算法，标记变换

• commit 阶段：

  执行标记点的变换，对应的视图变换 执行 componentDidUpdate、getSnapshotBeforeUpdate 新创建的 fiber 树替换之前的 fiber 树，等待下一次调用 this.setData()

---

useEffect 第二个参数的影响

• useEffect(fn)--->mount、update、

• useEffect(fn,[])--->mount、

• useEffect(fn,[xx])--->mount、xx 变换时、

• render 阶段到 commit 阶段 传递了一条包含不同 fiber 节点的 effect 链表（update、delete、create 操作时分别进行标记）即 effectTag，

• commit 阶段分为三个阶段

• beforeMutation 阶段：

• Mutation 阶段：

• appendChild Dom 节点插入视图

• layout 阶段：

• 同步调用 componentDidMount

• 同步调用 uselayoutEffect

• useEffect 会在三个子阶段执行完成后异步的调用

---