函数组件中如何获取组件更新前的 state?

在内置 hooks 中有一个 useRef，大家更多时候会使用 useRef 来获取实例.但是 useRef 也可以跨组件更新周期来保存数据

    function Count(){
        const [count,setCount ] = useState(1);
        const prevCount = useRef(count);
        useEffect(() =>{
            console.log(prevCount.current);
        })
        return <>
                <p>{count}</p>
                <button onClick={() => { 
                    setCount(count+1)
                }}>递增</button>
              </>
    }

在上述代码中，我们可以看到组件每次更新之后，prevCount.current 的值，还一直是 1,也就是 组件虽然更新了，但是 useRef 中保存的值不会变,基于这个特性，那我们想要获取上一次的状态值就很简单了

    function Count(){
        const [count,setCount ] = useState(1);
        const prevCount = useRef(count);
        useEffect(() =>{
            console.log(prevCount.current);
            prevCount.current = count;
        })
        return <>
                <p>{count}</p>
                <button onClick={() => { 
                    set Count(count+1)
                }}>递增</button>
              </>
    }

组件更新完成之后，我们可以通过 prevCount 获取组件更新前的值,使用完之后，在将prevCount 存储的值， 更新为当前值,再次更新时，就有可以获取到当前值