reactjs - useLayoutEffect 中的 setState

Question

据我所知，useLayoutEffect 同步运行，而 useEffect 异步运行 - 或多或少就像我们使用 useLayoutEffect 一样，但是setTimeout(func,0)。

useLayoutEffect 旨在“每当效果改变网站外观时”使用。因此，我假设我应该在某些情况下使用它，例如，效果会更改稍后显示给用户的某些状态。

但是，setState 本身是异步的，这似乎违背了 useLayoutEffect 的同步目的 - UI 更改只会在下一个 tick 中反射(reflect)在 DOM 中(除非我们以一种非 Reactish 的方式直接改变 DOM。

我哪里理解不正确？

Answer 1

useLayoutEffect 用于我们需要在浏览器绘制循环之前从 DOM 读取/写入内容的情况。

如您所指，setState 将在浏览器绘制完成后更新值并触发新的循环。根据 setState 的使用情况，将其包含在 useEffect 或 useLayoutEffect 中可能是有意义的。例如，如果我们正在设置一个值，我们需要在该循环呈现之前从 DOM 中读取它，那么它可能有意义 setState($ref.current.some_value_before_DOM_updates)。