react 定时器内闭包的存在导致 数据无法及时更新

需求:React Hooks useEffect使用定时器,每3秒更新一次值

代码如下:

javascript 复制代码
 const [MyV, setMyV] = useState(0);

  useEffect(() => {
    // 每隔3s,增加1
    const interval = setInterval(() => {
      setMyV(MyV+1);
    }, 3 * 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);

实际,页面展示MyV 一直是 1。 因为setInterval会行程一个闭包。此闭包内用到的的上下文的state都是创建时的初始值。因此 setMyV(MyV+1); 时,MyV一直都是 0

优化方法1 :setMyV的函数形式

适用于此案例,只涉及一个state的变更

原理分析: setMyV((v) => v + 1); 里的v不属于闭包内部的变量,而是一个形参,因此不会一直使用0+1,而是最新的数据+1

javascript 复制代码
  const interval = setInterval(() => {
      setMyV((v) => v + 1);
    }, 3 * 1000);
优化方法2 :使用ref

适用于复杂案例,或许会涉及多个state的变更、甚至更多代码、方法、state的关联调用

原理分析:useRef 返回一个具有单个 current 属性 的 ref 对象,并初始化为你提供的 初始值。

且 在后续useRef 将返回相同的对象

因此,在此setInterval的闭包里,它只会关注myRef这个ref对象指向的地址 ,不再变化即可。myRef内部的current属性千变万化,以及myRef.current内部的其他属性用到的其它state (此处指MyV)也都是最新的。

javascript 复制代码
  const [MyV, setMyV] = useState(0);
  const myRef: any = useRef();
  myRef.current = () => {
    setMyV(MyV + 1);
    //只要是在这里访问、处理的,永远是最新的数据
    //...
  };
  useEffect(() => {
    // 每隔3s,增加1
    const interval = setInterval(() => {
      myRef.current();
    }, 3 * 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);

参考:react官网对useRef的描述

相关推荐
zhanshuo11 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang12 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥13 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil14 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录21 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672221 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少26 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu41 分钟前
React Native 接入 eCharts
javascript·react native·react.js
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle