useEffect的闭包陷阱及useInterval

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

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

先看一段代码：

import { useEffect, useState } from "react";
import root from ".";

function App() {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
      console.log({count})
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <div>时间：{count}</div>
      <div onClick={() => root.unmount()}>卸载</div>
    </div>
  );
}

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（很少用）。