React生命周期方法是同步还是异步的？

Question

我是React的新学习者。目前，我正在学习Hooks。我正在学习useEffect hook。它通常与生命周期方法（componentDidMount、componentDidUpdate和componentWillUnmount等）进行比较。我的问题是关于这些函数的行为。生命周期方法是同步还是异步运行的？useEffect呢？

- Muhammad Muaaz

---

更正：无论同步还是异步，生命周期方法都会运行吗？ - Muhammad Muaaz

Answer 1

与componentDidMount或componentDidUpdate不同，使用useEffect安排的效果不会阻止浏览器更新屏幕。这使您的应用程序感觉更加响应。大多数效果不需要同步发生。在它们确实需要同步发生的罕见情况下（例如测量布局），有一个单独的useLayoutEffect Hook，其API与useEffect相同。请查看文档以获得清晰的视图。

- Mojo

---

是的，我从文档中读到了。实际上，这个“Yellow Box”把我带到了这里。它给人一种直觉，就像类方法是同步的，而钩子方法是异步的。 - Muhammad Muaaz

Answer 2

就 useEffect 而言，它是异步运行的，工作方式如下：

您以某种方式引起渲染（更改状态或父级重新渲染）

React 渲染您的组件（调用它）

屏幕得到视觉更新

然后 useEffect 运行

React 还有同步的 useEffect，即 useLayoutEffect

您以某种方式引起渲染（更改状态或父级重新渲染）

React 渲染您的组件（调用它）

useLayoutEffect 运行，React 等待其完成。

屏幕得到视觉更新

您可以阅读更多关于 useLayoutEffect 的信息

希望这能帮助到您

- ibtsam

---

是的，类组件的生命周期方法怎么样？ - Muhammad Muaaz