React 函数组件中使用监听器，无法获取到最新的值

通常在函数组件中用监听器，一般是以下的写法

  useEffect(() => {
    xxxxxx.addEventListener("click", handleclick, false);
    return () => {
      xxxxxx.removeEventListener("click",  handleClick);
    }
  }, [])

而相应的函数，可能是

const handleClick = e =>{
    consle.log(aaa);   // state中的值
}

如果其他地方改变了state的值，导致组件重新渲染，渲染后state的值是最新的，但是当点击这个组件监听的dom时，会发现log出的值是旧的。

这是因为监听器绑定的是第一次render时生成的函数，这个函数的上下文中的state也是第一次的值，所以即便后面render了多次，因为绑定的是第一次render的函数，所以state值也是旧的

解决：
把函数挂到ref上，或者用一些hook库里的hook，如useMemorizedFn等，保持render过程中唯一的引用

不一定是 addEventListener, event.on 也会这样