React hooks - useLayoutEffect

useLayoutEffect

用法

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

  1. useLayoutEffect 接收一个函数和一个依赖项数组作为参数
  2. 只有在数组中的依赖项发生改变时才会再次执行副作用函数
  3. useLayoutEffect 也可以返回一个清理函数
javascript 复制代码
useEffect(()=>{
  return () => {}
}, 依赖项数组)
区别
hooks名称 执行时机 执行过程
useEffect 在浏览器重新绘制屏幕 之后 触发 异步 执行,不阻塞浏览器绘制
useLayoutEffect 在浏览器重新绘制屏幕 之前 触发 同步 执行,阻塞浏览器重新绘制
javascript 复制代码
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 内部状态修改后才会更新页面,所以不会出现闪烁

javascript 复制代码
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>
    </>
  )
}
相关推荐
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
NicolasCage3 小时前
react-typescript学习笔记
javascript·react.js
ZL不懂前端5 小时前
使用 React + Konva 构建交互式立方体绘制工具
react.js·ecmascript 6
NicolasCage6 小时前
Icon图标库推荐
vue.js·react.js·icon
Lazy_zheng8 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
WildBlue9 小时前
React 遇上原子 CSS:前端开发的超级进化 🚀
前端·react.js
namehu9 小时前
“c is not a function” - 一次由 useEffect 异步函数引发的 React 底层崩溃分析
前端·javascript·react.js
iaku9 小时前
🔥React工程化实践:构建企业级可维护应用架构
前端·react.js·前端框架
晓得迷路了11 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js