为什么useEffectLayout可以避免闪烁？事实上，屏幕在

Question

我知道 useEffectLayout 在屏幕重新渲染之前运行，useEffectLayout 的目的是为了避免闪烁。

所以，我预计 useEffectLayout 中的状态更新后，它不会立即重新渲染屏幕，而是先更新 state 中的值。然而我看到useEffect是在useEffectLayout之后执行的。

这意味着在 useEffectLayout 之后使用旧的状态值重新渲染屏幕。

所以我不明白为什么useEffectLayout可以避免闪烁。

import { useEffect, useState, useLayoutEffect } from "react";
export default function App() {
  const [count, setCount] = useState(0);

  console.log("count in code: ", count);

  useEffect(() => {
    console.log("count in useeffect: ", count);
  }, [count]);

  useLayoutEffect(() => {
    console.log("count in uselayout: ", count);
    setCount(1);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Answer 1

它存在于 React 渲染期间的事件序列中（见下文）

渲染阶段

1. React 计算组件的外观并准备更新
2. React 将这些更新应用到 DOM，使更改准备好显示
3. useLayoutEffect 钩子在 DOM 更新之后、屏幕显示任何内容之前运行。它可以让您在此处进行调整，这些调整将在屏幕更新之前应用
4. 浏览器然后将更新的内容绘制到屏幕上
5. useEffect 钩子在屏幕更新后运行，因此此处的任何更改都将导致另一次重新渲染，但只有在用户已经看到初始更新之后

利用 useLayoutEffect 允许您在 DOM 更新之后、浏览器将更改呈现到屏幕之前对 DOM 或状态进行更改。

您可以在官方 React 文档这里阅读有关 useLayoutEffect 的更多信息。