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>
    </>
  )
}
相关推荐
Amy_cx6 小时前
搭建React Native开发环境
javascript·react native·react.js
骑自行车的码农7 小时前
React 事件收集函数
前端·react.js
Pa2sw0rd丶9 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
阿民不加班10 小时前
【React】打卡笔记,入门学习01:点击事件
笔记·学习·react.js
菠萝+冰10 小时前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code10 小时前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
九年义务漏网鲨鱼14 小时前
从零学习 Agentic RL(四)—— 超越 ReAct 的线性束缚:深入解析 Tree-of-Thoughts (ToT)
前端·学习·react.js
Jay丶14 小时前
Next.js 与 SEO:让搜索引擎爱上你的网站 💘
前端·javascript·react.js
路光.15 小时前
一.React相关面试真题
前端·react.js·前端框架
_光光15 小时前
任务队列及大文件上传实现(前端篇)
前端·react.js·typescript