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>
    </>
  )
}
相关推荐
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong17 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373218 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪21 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码1 天前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农1 天前
【React用到的一些算法】游标和栈
算法·react.js
小高0071 天前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆1 天前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
遂心_2 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js