在前文，介绍了 副作用 hook useEffect, 那么 useLayoutEffect 与 useEffect 的区别联系是啥呢？

相同点

useLayoutEffect 其函数签名与 useEffect相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染

不同点

调用的时间不同：

• useEffect：浏览器渲染完成后，用户看到新的渲染结果之后触发，异步执行，不会造成浏览器 阻塞

• useLayoutEffectHook：完成了DOM改动，但还没有呈现给用户触发,并且是同步执行的，可能会造成浏览器的阻塞

语法

useLayoutEffect(()=> fn,[deps])

参数fn: 回调函数，和 useEffect hook 的使用是一样的，相当于 componentDidMount 和 componentDidUpdate的执行时间

参数 deps, 是依赖收集，依赖发生变化就会触发

和useEffect的语法是一样的，只是执行的时间不一样

使用注意事项

提示

如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件，则需要注意 useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect。

如果你使用服务端渲染，请记住，无论 useLayoutEffect还是 useEffect 都无法在 Javascript 代码加载完成之前执行。这就是为什么在服务端渲染组件中引入 useLayoutEffect 代码时会触发 React 告警。解决这个问题，需要将代码逻辑移至 useEffect 中（如果首次渲染不需要这段逻辑的情况下），或是将该组件延迟到客户端渲染完成后再显示（如果直到 useLayoutEffect 执行之前 HTML 都显示错乱的情况下）。

若要从服务端渲染的HTML中排除依赖布局 effect 的组件，可以通过使用 showChild && <Child /> 进行条件渲染，并使用useEffect(() => { setShowChild(true); }, []) 延迟展示组件。这样，在客户端渲染完成之前，UI 就不会像之前那样显示错乱了。

案例

import React, { Ref, useEffect, useRef, useState } from 'react'
export default function TestLayoutEffectHook() {
  // 页面显示数据
  const [n, setN] = useState(0)
// 获取dom
  const pRef:Ref<HTMLParagraphElement> = useRef(null);
  // 操作dom 来改变
  useEffect(() => {
    pRef.current!.innerText = '从0变化到123'
  }, [n])
  return (
    <div>
      组件显示的值
      <p ref={pRef}> {n} </p>
    </div>
  )
}

这个效果是很快的，一闪而过 将 0 改成 从0变化到123， 一般的截图软件看不到这个效果，解决这个办法就是把 useEffect 改成 useLayoutEffect