React组件中监听函数获取不到最新的state

场景:在useEffect事件中，更新setState或者redux后获取到的state值为第一次的值，不是最新的

例如：

export default function Travel(props) {
    const divRef = useRef(null)
    const [count, setCount] = useState(0)
    const handleClick = () => {
        console.log('click',count);
    }

    useEffect(() => {
        window.addEventListener('click', handleClick)
        return () => {
            window.removeEventListener('click', handleClick)
        }
    },[])
    console.log('out',count);


    return (
        <div ref={divRef} >
            <button onClick={() => {
        setCount(count => count + 1)

            }}>点击</button>
        </div>
    )
}

又或者

const [flag,setFlag] = useState(false);
  
  const onClick = ()=>{
    setFlag(!flag)
    console.log(flag)
  }
  
  useEffect(() => {
    document.addEventListener('click',onClick)
  }, []);

原因：

找了一些资料了解到

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

解决方案1:

useEffect(() => {
    window.addEventListener('click', handleClick)
    return () => {
        window.removeEventListener('click', handleClick)
    }
},[count])

监听值的变化，绑定并解绑事件

解决方案2:

const stateRef = useRef(0)
const [state,setState] = useState(stateRef.current);

const Function = ()=>{
    let data = JSON.parse(JSON.stringify(stateRef));
    /*功能*/
    stateRef.current = newData;
    setState(stateRef.current)
}  

通过useRef创建变量来改变state的值

其他情况:

const stateRef = useRef(null);

useEffect(() => {
    if (
      !stateRef.current ||
      (reduxState &&
        JSON.stringify(reduxState) !== JSON.stringify(stateRef.current) &&
        JSON.stringify(reduxState.id) !== JSON.stringify(stateRef.current?.id))
    ) {
      sstateRef.current = JSON.parse(JSON.stringify(reduxState));
    }
  }, [reduxState]);

比方说redux缓存了一串数据，这个数据用于控制物体移动，就可以监听redux state,将值赋值给stateRef。需要注意防止重复赋值，不然会造成抖动。判断是否数据无变化，判断是否切换了redux的数据。

有其他优雅的方法，希望大佬们可以留言。