javascript - 哪个 React 钩子(Hook)首先执行 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 runs asynchronously and after a render is painted to the screen.

以下是 useEffect 上的一些内容

您以某种方式导致渲染(更改状态或父级重新渲染)

React 渲染你的组件(调用它)

屏幕视觉更新

那么 useEffect 运行。

和

useLayoutEffect, on the other hand, runs synchronously after a render but before the screen is updated

您以某种方式导致渲染(更改状态或父级重新渲染)

React 渲染你的组件(调用它)

useLayoutEffect运行，React 等待它完成。

屏幕视觉更新

如@ 罗伯特 建议使用 useEffect大多数时候。