useEffect的闭包陷阱和useInterval

闭包的作用:通过一系方法,将函数内部的变量(局部变量)转化为全局变量

在我的理解中，闭包就是能够读取其他函数内部变量的函数。

先看一段代码：

1.  
   import { useEffect, useState } from "react";
2.  
   import root from ".";
3.  
    
4.  
   function App() {
5.  
   const [count, setCount] = useState<number>(0);
6.  
    
7.  
   useEffect(() => {
8.  
   const timer = setInterval(() => {
9.  
   setCount(count 1);
10.  
    console.log({count})
11.  
    }, 1000);
12.  
    return () => clearInterval(timer);
13.  
    }, []);
14.  
     
15.  
    return (
16.  
    <div>
17.  
    <div>时间：{count}</div>
18.  
    <div onClick={() => root.unmount()}>卸载</div>
19.  
    </div>
20.  
    );
21.  
    }
22.  
     
23.  
    export default App;

结果是页面展示的时间一直是1，控制台一直有输出{count：0}

解析：setCount(count 1)第一次执行到这时，读取到了外面这个函数App()的内部变量count 的值0，没有形成闭包，所以读取不到最新的值，在useEffect中得到的count就一直是0，每隔1000毫秒都在执行0 1就一直是1，所以页面显示不变。

想要实现每隔1000毫秒时间 1，必须获得App()函数中最新的count值

setCount(count => count 1)，使用函数作为参数，接受一个旧的state（由react传入的state即App()函数中上一次修改之后的count值），得到新的state。

setState（param1，param2），param1有两种方式：对象/函数。对象：要先通过const拿到原来的值。函数：react会传递两个参数state即原来的值和props（很少用）。

这篇好文章是转载于：学新通技术网