当前位置：首页 > wzjs >正文

厦门医疗网站建设seo人才招聘

wzjs 2025/7/20 18:59:07

厦门医疗网站建设,seo人才招聘,兰州疫情最新消息今天,易记域名网站大全在react中hook的闭包问题很容易在不经意间犯错，项目写大了之后更是难以找到到底是哪里出了问题。为什么会出现闭包问题出现闭包问题的原因就是函数中操作的变量不是最新的变量，什么意思呢，我们知道函数组件每次刷新都是重新运行一次函数&…

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

为什么会出现闭包问题

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

代码

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这个钩子了。

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;

在这里插入图片描述
操作方式

在这里插入图片描述

每次组件刷新的时候都让函数重新执行，让函数去操作最新变量就可以了

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的另一个重载的形式。

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;