B
B
Blog
搜索文档…
⌃K

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

Tag: React, Hooks, Life cycle
这节主要内容是其他生命周期方法还能那么顺利的转 Hooks 么?我们来一起看一看:

生命周期方法

  • componentDidUpdate: 获取 DOM 的信息,如高度等,在 Hooks 中使用 useLayoutEffect
    关于 useLayoutEffect 的官方指导:
    1. 1.
      其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前,useLayoutEffect 内部的更新计划将被同步刷新。
    2. 2.
      尽可能使用标准的 useEffect 以避免阻塞视觉更新。
    3. 3.
      useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的
    场景:获取 Dom 高度 解说:useEffect 的执行会在 DOM 渲染之前,所以如果想要拿到最新 state 的 DOM,这个时候就可以在 useLayoutEffect 中获取。(配合 useRef)