React hooks - useLayoutEffect

useLayoutEffect

• • • • 用法
      • 区别

用法

useLayoutEffect 和 useEffect 的使用方式很相似：

1. useLayoutEffect 接收一个函数和一个依赖项数组作为参数
2. 只有在数组中的依赖项发生改变时才会再次执行副作用函数
3. useLayoutEffect 也可以返回一个清理函数

useEffect(()=>{
  return () => {}
}, 依赖项数组)

区别

hooks名称	执行时机	执行过程
useEffect	在浏览器重新绘制屏幕 之后 触发	异步 执行，不阻塞浏览器绘制
useLayoutEffect	在浏览器重新绘制屏幕 之前 触发	同步 执行，阻塞浏览器重新绘制

export const RandomNumber: React.FC = () => {
  const [num, setNum] = useState(Math.random() * 200)

  useEffect(() => {
    if (num === 0) {
      setNum(10 + Math.random() * 200)
    }
  }, [num])

  return (
    <>
      <h1>num 的值是：{num}</h1>
      <button onClick={() => setNum(0)}>重置 num</button>
    </>
  )
}

将useEffect改成useLayoutEffect后数字不再闪烁

因为点击按钮时，num 更新为 0，但此时页面不会渲染，而是等待 useLayoutEffect 内部状态修改后才会更新页面，所以不会出现闪烁

export const RandomNumber: React.FC = () => {
  const [num, setNum] = useState(Math.random() * 200)

  useLayoutEffect(() => {
    if (num === 0) {
      setNum(10 + Math.random() * 200)
    }
  }, [num])

  return (
    <>
      <h1>num 的值是：{num}</h1>
      <button onClick={() => setNum(0)}>重置 num</button>
    </>
  )
}