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

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事情

1. 您以某种方式导致渲染（更改状态，或父级重新渲染）
2. React 渲染你的组件（调用它）
3. 屏幕在视觉上更新
4. 然后useEffect 运行。

和

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

1. 您以某种方式导致渲染（更改状态，或父级重新渲染）
2. React 渲染你的组件（调用它）
3. useLayoutEffect运行，React 等待它完成。
4. 屏幕在视觉上更新

因此，作为@罗伯特建议使用useEffect的大部分时间。

Answer 2

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

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

Answer 3

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