时间戳

首页 > 解决方案 > setState 在 useLayoutEffect 中

reactjs - setState 在 useLayoutEffect 中

问题描述

据我了解，useLayoutEffect同步运行，而useEffect异步运行 - 或多或少就像我们useLayoutEffect使用setTimeout(func,0).

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

然而，setState它本身是异步的，这似乎违背了同步的目的useLayoutEffect——UI 变化只会在下一个滴答声中反映在 DOM 中（除非我们以非 Reactish 的方式直接改变 DOM）。

我不正确理解什么？

标签： reactjsreact-hooks

解决方案

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

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

推荐阅读