hook-api
大约 1 分钟约 411 字
useEffect 依赖执行关系
useEffect
第二个参数[]如何影响 fn 的执行?换句话说,它的第二个参数是如何影响 fiber
创建 Passive Effect
的?
- 不包含第二个参数
useEffect(() => {})
,Mount
&Update
时,每次render
时都会创建一个Passive Effect
; - 包含一个空数组[]作为依赖项
useEffect(() => {}, [])
,它会在mount
时,创建Passive Effect
- 包含一个依赖项
[dep]
,它会在 mount 时,dep 依赖项变化时,创建 Passive Effect
fn 和 componentDidMount 的执行时机分别是什么?
过程
render 阶段到 commit 阶段,传递的时包含不同 fiber 节点的 effect 的链表,commit 阶段时将状态变化(Effect)渲染在视图中
- 渲染视图前,beforeMutation 阶段
- 渲染视图中,mutation 阶段,Placement 会执行 appendChild,DOM 节点插入到视图中
- 渲染视图后,layout 阶段,调用 componentDidMount
- useEffect 时 commit 完成后异步调用
- componentDidMount 是 commit 阶段完成视图更新(mutation 阶段)后,在 layout 阶段同步调用
- useLayoutEffect 和 componentDidMount 调用时机一致,也是在 layout 阶段同步调用
