> For the complete documentation index, see [llms.txt](https://gyx8899.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gyx8899.gitbook.io/blog/react/reactlifecycletohooks2.md).

# React: 生命周期方法转 Hooks-2

Tag: React, Hooks, Life cycle

***

这节主要内容是其他生命周期方法还能那么顺利的转 Hooks 么？我们来一起看一看：

## 生命周期方法

* componentDidUpdate: 获取 DOM 的信息，如高度等，在 Hooks 中使用 useLayoutEffect

  关于 `useLayoutEffect` 的官方指导:

  > 1. 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
  > 2. 尽可能使用标准的 useEffect 以避免阻塞视觉更新。
  > 3. useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的

  场景：获取 Dom 高度 解说：useEffect 的执行会在 DOM 渲染之前，所以如果想要拿到最新 state 的 DOM，这个时候就可以在 useLayoutEffect 中获取。（配合 useRef）