500字理透react的hook闭包问题

在react中hook的闭包问题很容易在不经意间犯错,项目写大了之后更是难以找到到底是哪里出了问题。

为什么会出现闭包问题

出现闭包问题的原因就是函数中操作的变量不是最新的变量,什么意思呢,我们知道函数组件每次刷新都是重新运行一次函数,这就会导致,每次刷新都会产生新的变量,但是如果用useEffect把依赖性置为空数组的话,那么useEffect中的回调就不会再次执行,导致回调中保存的仍是刷新前的变量。

代码
javascript 复制代码
import { useEffect } from "react";
import { useState } from "react";

function App() {

  const [count, setCount] = useState(0);


  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 500);
    return () => {
      clearInterval(interval)
    };
  }, []);


  return (
    <div>
      {count}  
    </div>
  );
}

export default App;

运行效果如下

我们可以看到代码并没有我们预期的结果,加到1就停止增加了,为什么呢?

我们分析一下APP函数的运行次数。

第一次运行count = 0过一秒钟后因为会setCount导致count = 1然后刷新页面,重新运行APP函数,在内存中生成新的count变量,useEffect因为依赖项为[]所以不在再次执行,setInterval中的函数保存的还是第一次函数执行的count变量,setInterval后续的每次执行操作的都是第一次的变量导致一直setCount(0 + 1),App函数并不会再次刷新了。
看图

现在知道了闭包的产生原因,就是因为函数中操作的变量不是最新的,那解决办法就很明显了。

  • 函数前后刷新都会产生新的变量,那我们让他不产生新的不就可以了,这就可以使用useRef这个钩子了。
javascript 复制代码
import { useEffect, useRef } from "react";
import { useState } from "react";

function App() {

  const countRef = useRef(0);
  const [_, forceUpdate] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log('count', countRef.current)
      countRef.current += 1;
      forceUpdate(Math.random())
    }, 500);
    return () => {
      clearInterval(interval)
    };
  }, []);


  return (
    <div>
      {countRef.current}  
    </div>
  );
}

export default App;


操作方式

  • 每次组件刷新的时候都让函数重新执行,让函数去操作最新变量就可以了
javascript 复制代码
import { useEffect } from "react";
import { useState } from "react";

function App() {

  const [count, setCount] = useState(0);


  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 500);
    return () => {
      clearInterval(interval)
    };
  }, [count]);


  return (
    <div>
      {count}  
    </div>
  );
}

export default App;

操作方式

  • 闭包导致了这个问题,那我们就不让他产生闭包,这就用到了setCount的另一个重载的形式。
javascript 复制代码
import { useEffect } from "react";
import { useState } from "react";

function App() {

  const [count, setCount] = useState(0);


  useEffect(() => {
    const interval = setInterval(() => {
      // 使用箭头函数,可以获取到最新的count值
      setCount(count => count + 1);
    }, 500);
    return () => {
      clearInterval(interval)
    };
  }, []);


  return (
    <div>
      {count}  
    </div>
  );
}

export default App;

我们把函数传入setCount中,在setCount执行的时候会自动把最新的count值传入,就不会出现闭包导致每次操作的count都是0的情况了。

创造不易,喜欢留下个👍 吧

相关推荐
x-cmd11 分钟前
[250512] Node.js 24 发布:ClangCL 构建,升级 V8 引擎、集成 npm 11
前端·javascript·windows·npm·node.js
夏之小星星24 分钟前
el-tree结合checkbox实现数据回显
前端·javascript·vue.js
Bl_a_ck2 小时前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
为美好的生活献上中指2 小时前
java每日精进 5.11【WebSocket】
java·javascript·css·网络·sql·websocket·网络协议
寧笙(Lycode)3 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架
拖孩3 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
苹果电脑的鑫鑫4 小时前
element中表格文字剧中可以使用的属性
javascript·vue.js·elementui
一丝晨光4 小时前
数值溢出保护?数值溢出应该是多少?Swift如何让整数计算溢出不抛出异常?类型最大值和最小值?
java·javascript·c++·rust·go·c·swift
Wannaer5 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js
懒羊羊我小弟5 小时前
手写符合Promise/A+规范的Promise类
前端·javascript