react 闭包一次性搞透

在业务开发中经常性碰到，当setState 值后，再去获取发现始终是初始值，一直没变。

首先先来看一下

function Index() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: 20 }}>
      <div>数字：{count}</div>
      <Button
        onClick={() => {
          // 第一种方式
          setCount((v) => v + 1);
          setCount((v) => v + 2);
          setCount((v) => v + 3);

          // 第二种方式
          setCount(count + 1);
          setCount(count + 2);
          setCount(count + 3);
        }}
      >
        批量执行
      </Button>
    </div>
  );
}

export default Index;

1. 当为函数时，hooks始终获取的是上一次最新state ,而直接去调用引用的是第一次state初始值，所以最终结果一个是6第二种方式为0 +1 0 +2 0 +3 最终是3。

闭包的本质，我觉得是可以从函数上下文来理解

1. 依靠于第二种方式，我由于onclick只触发了一次，也就是说当前这个函数上下文值被创建了一次，那这里引用的自然就是第一次的count

实际是这样

只有当onclick再次被触发，才会获取上一次最新的数据，当前上下文引用的变量才会被重新赋值