在useEffect中使用state，state不是最新值

简单介绍一下情况：

起初a的值是0，在组件挂载的时候注册了button的点击事件。然后点击一下累加按钮，在点击一点当前数字按钮，发现打印还是0，其实累加多少次，打印的都是0。但是页面可以正确渲染。

代码demo类似这样：

import React, { useEffect, useRef, useState } from "react";

function App() {
  const [a, setA] = useState(0)
  const btnRef = useRef(null)

  useEffect(() => {
    btnRef.current.onclick = () => {
      console.log(a, 'a')
    }
  }, [])
  return (
    <div>
      {a}
      <button onClick={() => setA(a + 1)}>累加</button>
      <button ref={btnRef}>当前数字</button>
    </div>
  );
}

export default App;

这个问题其实是因为闭包引起的。我在这里找到了一篇文章。

我们来简单分析一下，这是什么问题引起的。

1. 调用App()，App组件数据初始化，此时a的值是0
2. jsx开始渲染，挂载
3. 挂载完毕之后执行useEffect，监听按钮点击事件，注意现在useEffect的依赖项是空数组
4. 点击累加按钮，响应式数据发生变化、重新执行App()

注意这个时候执行了两次App()，第二次执行的时候并没有重新覆盖按钮的点击事件，因为useEffect监听是是空数组，所以当第二次执行App()之后，点击事件引用的a还是第一次App()执行的作用域，也就是形成了闭包。而第一次执行App()的时候，a的值是0，所以以后点击就一直输出0。

那么如果修改呢，可以这样改

 useEffect(() => {
    btnRef.current.onclick = () => {
      console.log(a, 'a')
    }
  }, [a])

也就是每次a的值改变，就重新监听点击事件