Question

我有一个组件，我想在屏幕上呈现HTML之前进行一些计算。由于useEffect和useLayoutEffect都可以处理此任务，因此我的问题是将它们都放在代码中，useEffect和useLayoutEffect中哪个将首先被触发？

欢呼

Answer 1

这仍然是您自己的编码方式，但是这里的信息很少，您可以随时进行更多研究。

useEffect(() => {
  // do side effects
   return () => /* cleanup */
 }, [dependency, array]);

 useLayoutEffect(() => {
  // do side effects
 return () => /* cleanup */
 }, [dependency, array]);

useEffect异步运行，并且在将渲染绘制到屏幕上之后。

这是useEffect

上的几件事

您以某种方式导致渲染（更改状态，或父级重新渲染）
React渲染您的组件（称为它）
屏幕在视觉上得到了更新
之后次运行useEffect。

和

另一方面，
useLayoutEffect在渲染之后但屏幕更新之前同步运行

您以某种方式导致渲染（更改状态，或父级重新渲染）
React渲染您的组件（称为它）
useLayoutEffect运行，React等待它完成。
屏幕在视觉上得到了更新

因此，正如@ Robert 建议大多数时候使用useEffect。

Answer 2

UseLayoutEffect是同步的，它将阻止您的应用程序。还会导致其他渲染。

我建议使用useEffect并在某些情况下保留useLayoutEffect。

Answer 3

useEffect() 在浏览器绘制之后运行，useLayoutEffect() 在绘制之前运行。因此，useLayoutEffect() 在 useEffect() 之前先运行。您可以通过在两个函数中放置 console.log() 来自行测试，看看哪个先执行。

哪个React钩子首先执行useEffect或useLayoutEffect？

3 个答案: