update hook answer
This commit is contained in:
parent
46dce38662
commit
9de138917c
@ -10,8 +10,6 @@
|
|||||||
- useLayoutEffect:回调函数会在 commit 阶段的 Layout 子阶段同步执行,一般用于执行 DOM 相关的操作
|
- useLayoutEffect:回调函数会在 commit 阶段的 Layout 子阶段同步执行,一般用于执行 DOM 相关的操作
|
||||||
- useInsertionEffect:回调函数会在 commit 阶段的 Mutation 子阶段同步执行,与 useLayoutEffect 的区别在于执行的时候无法访问对 DOM 的引用。这个 Hook 是专门为 CSS-in-JS 库插入全局的 style 元素而设计。
|
- useInsertionEffect:回调函数会在 commit 阶段的 Mutation 子阶段同步执行,与 useLayoutEffect 的区别在于执行的时候无法访问对 DOM 的引用。这个 Hook 是专门为 CSS-in-JS 库插入全局的 style 元素而设计。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 数据结构
|
## 数据结构
|
||||||
|
|
||||||
对于这三个 effect 相关的 hook,hook.memoizedState 共同使用同一套数据结构:
|
对于这三个 effect 相关的 hook,hook.memoizedState 共同使用同一套数据结构:
|
||||||
@ -76,8 +74,6 @@ function App(){
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 工作流程
|
## 工作流程
|
||||||
|
|
||||||
整个工作流程可以分为三个阶段:
|
整个工作流程可以分为三个阶段:
|
||||||
@ -343,12 +339,28 @@ commitHookEffectListMount(Layout | HasEffect, fiber);
|
|||||||
|
|
||||||
由于 commitHookEffectListUnmount 方法的执行时机会先于 commitHookEffectListMount 方法执行,因此每次都是先执行 effect.destory 后才会执行 effect.create。
|
由于 commitHookEffectListUnmount 方法的执行时机会先于 commitHookEffectListMount 方法执行,因此每次都是先执行 effect.destory 后才会执行 effect.create。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 真题解答
|
## 真题解答
|
||||||
|
|
||||||
> 题目:说一说 useEffect 和 useLayoutEffect 的区别?
|
> 题目:说一说 useEffect 和 useLayoutEffect 的区别?
|
||||||
>
|
>
|
||||||
> 参考答案:
|
> 参考答案:
|
||||||
>
|
>
|
||||||
|
> 在 React 中,用于定义有副作用因变量的 Hook 有:
|
||||||
>
|
>
|
||||||
|
> - useEffect:回调函数会在 commit 阶段完成后异步执行,所以不会阻塞视图渲染
|
||||||
|
> - useLayoutEffect:回调函数会在 commit 阶段的 Layout 子阶段同步执行,一般用于执行 DOM 相关的操作
|
||||||
|
>
|
||||||
|
> 每一个 effect 会与当前 FC 其他的 effect 形成环状链表,连接方式为单向环状链表。
|
||||||
|
>
|
||||||
|
> 其中 useEffect 工作流程可以分为:
|
||||||
|
>
|
||||||
|
> - 声明阶段
|
||||||
|
> - 调度阶段
|
||||||
|
> - 执行阶段
|
||||||
|
>
|
||||||
|
> useLayoutEffect 的工作流程可以分为:
|
||||||
|
>
|
||||||
|
> - 声明阶段
|
||||||
|
> - 执行阶段
|
||||||
|
>
|
||||||
|
> 之所以 useEffect 会比 useLayoutEffect 多一个阶段,就是因为 useEffect 的回调函数会在 commit 阶段完成后异步执行,因此需要经历调度阶段。
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user