React 的 commit 阶段 ​

flushPassiveEffects ​

在一开始，react 会异步执行还没有执行的useEffect回调 和 上次更新的useEffect的销毁函数

beforeMutation 阶段 ​

• 首先进行 dom 的 blur 和 focus 相关操作
• 执行getSnapshotBeforeUpdate
• scheduleCallback异步调度, flushPassiveEffects会执行useEffect回调 和 上次更新的useEffect的销毁函数

mutation 阶段 ​

• 如果有直接的文本更新 Effect Tag(ContentReset), 更新节点的文本内容
• 如果存在Ref，更新 ref
• 如果存在Placement, 执行commitPlacement, 找到父节点 dom，将节点插入。
• 如果存在PlacementAndUpdate, 执行commitPlacement和commitWork
  • 找到父节点 dom，将节点插入
  • 调用useLayoutEffect的销毁函数
  • 更新 dom 属性
• 如果存在Deletion，执行commitDeletion
  • 删除 dom
  • 删除 fiber
  • 收集 useEffect 的销毁函数
  • 执行componentWillUnmount
  • 解绑 ref

layout 阶段 ​

• 执行useLayoutEffect回调
• 收集useEffect的销毁函数
• 收集useEffect的回调
• 执行componentDidMount
• 执行componentDidUpdate
• 执行this.setState的回调函数
• 执行ReactDOM.render的回调函数

一段时间后。。。异步执行useEffect的销毁函数和回调

useEffect 和 useLayoutEffect 的区别 ​