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>
    </>
  )
}
相关推荐
菜鸟‍4 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
前端鳄鱼崽8 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679188 小时前
【React.js】渐变环形进度条
前端·react.js·svg
demi_meng16 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君201617 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
JamSlade21 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保21 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo12151 天前
React 19 vs React 18全面对比
前端·javascript·react.js
腹黑天蝎座1 天前
浅谈React19的破坏性更新
前端·react.js