update hook answer

This commit is contained in:
xie jie 2024-12-25 18:39:46 +08:00
parent 46dce38662
commit 9de138917c

View File

@ -10,8 +10,6 @@
- useLayoutEffect回调函数会在 commit 阶段的 Layout 子阶段同步执行,一般用于执行 DOM 相关的操作
- useInsertionEffect回调函数会在 commit 阶段的 Mutation 子阶段同步执行,与 useLayoutEffect 的区别在于执行的时候无法访问对 DOM 的引用。这个 Hook 是专门为 CSS-in-JS 库插入全局的 style 元素而设计。
## 数据结构
对于这三个 effect 相关的 hookhook.memoizedState 共同使用同一套数据结构:
@ -76,8 +74,6 @@ function App(){
![image-20230307105834596](https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-03-07-025835.png)
## 工作流程
整个工作流程可以分为三个阶段:
@ -343,12 +339,28 @@ commitHookEffectListMount(Layout | HasEffect, fiber);
由于 commitHookEffectListUnmount 方法的执行时机会先于 commitHookEffectListMount 方法执行,因此每次都是先执行 effect.destory 后才会执行 effect.create。
## 真题解答
> 题目:说一说 useEffect 和 useLayoutEffect 的区别?
>
> 参考答案:
>
> 在 React 中,用于定义有副作用因变量的 Hook 有:
>
> - useEffect回调函数会在 commit 阶段完成后异步执行,所以不会阻塞视图渲染
> - useLayoutEffect回调函数会在 commit 阶段的 Layout 子阶段同步执行,一般用于执行 DOM 相关的操作
>
> 每一个 effect 会与当前 FC 其他的 effect 形成环状链表,连接方式为单向环状链表。
>
> 其中 useEffect 工作流程可以分为:
>
> - 声明阶段
> - 调度阶段
> - 执行阶段
>
> useLayoutEffect 的工作流程可以分为:
>
> - 声明阶段
> - 执行阶段
>
> 之所以 useEffect 会比 useLayoutEffect 多一个阶段,就是因为 useEffect 的回调函数会在 commit 阶段完成后异步执行,因此需要经历调度阶段。