React Hooks - useEffect/useLayout

[imfenghuang]

function Foo() {

  useEffect(() => {
    console.log(1);
  }, []);

  useLayoutEffect(() => {
    console.log(2);
  }, []);

  useEffect(() => {
    console.log(3);
  }, []);

  return <p>this is Foo</p>;
}

按上述示例，挂载相关副作用 hook 后，内部逻辑结构如下：

1. Foo 的 fiber.memoizedState 指向第一个 useEffect hook，该 hook.memoizedState 指向一个 effct 对象，该对象的 next 指向 useLayoutEffect hook 的 effect 对象；

2. 指向第一个 useEffect hook 的 hook.next 指向下一个 useLayoutEffect hook ；

3. 最后一个 useEffect hook 的 hook.memoizedState 的 effct 的 next 指向第一个 useEffect hook 的 effct

4. Foo 的 fiber.updateQueue.lastEffect 指向最后一个 useEffect hook 的 effect 对象；

5. 不同类型的 effect.tag（HookFlags）也不同：

   • useEffct tag 有 HasEffect 和 Passive
   • useLayoutEffect tag 有 HasEffect 和 Layout