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>
    </>
  )
}
相关推荐
PineappleCoder1 小时前
React 18 开发完全指南:从环境搭建到调试优化
前端·react.js
GISer_Jing9 天前
React Next快速搭建前后端全栈项目并部署至Vercel
前端·react.js·前端框架
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript
一嘴一个橘子9 天前
react 的过渡动画
react.js
巴巴_羊9 天前
React 新钩子useImperativeHandle
前端·javascript·react.js
訾博ZiBo10 天前
开源分享:我开发了一个智能文本提取浏览器插件,彻底解决复制粘贴的烦恼
前端·react.js·html
萌萌哒草头将军10 天前
什么?React 中可以写 SolidJS 了?SolidJS 官方出手了 🚀🚀🚀
前端·vue.js·react.js
今日亦是美好的一天10 天前
使用Tailwind CSS和i18n的react实践
前端·react.js·前端框架
niusir10 天前
彻底搞懂 useEffect:依赖项、清除函数与常见陷阱
前端·javascript·react.js
niusir10 天前
理解 React 的渲染机制:为什么组件会重新渲染?
前端·javascript·react.js