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的情况了。

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

相关推荐
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手3 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅3 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6663 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
前端小盆友3 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js