什么是在React JS中使用钩子的功能组件的流程

Question

我已经阅读了关于钩子的React文档，但我不明白它是如何工作的。当我们单击“增加”按钮时，测试组件将显示当前计数和以前的计数，但是我认为每次我单击“增加”按钮时，计数都会增加并且反应将重新呈现，计数状态被记住，而不是再次初始化并增加到2，因为它是一个状态，但是prevCount不是通过usePrevious钩子以新值count + 1再次初始化吗？如果prevCount再次初始化，则prevRef.current必须像第一次渲染一样为null？如果不是int，那么如何捕获最新更新的count值？谢谢

function Test() {
    const [count, setCount] = useState(0);
    const prevCount = usePrevious(count);    
    return (
        <>
            <h1> now: {count}, before: {prevCount}</h1>
            <button onClick={() => setCount(count + 1)}>increase</button>
        </>
    )
}

function usePrevious(value) {
    const prevRef = useRef();
    useEffect(()=>{
        prevRef.current = value;
    });
    return prevRef.current;
}