500字理透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;