react state hook 的一个小问题

Question

问题代码如下（我知道这样写不对哈，因为闭包里的 count 永远为 0）：

function Test() {
    console.log('func execute');
    let [count, setCount] = useState(0);
    console.log(count);
    useEffect(() => {
        console.log('useEffect')
        const id = setInterval(() => {
            console.log(count);
            setCount(count + 1);
        }, 500);
    }, []);

    return (
        <div>
            <p>{count}</p>
        </div>
    )
}

export default Test

最后控制台打印出来是这样：

我不明白的是为什么 Test 会执行 3 次，我的理解是第 2 次执行后外层的 count 已经是 1 了，为什么还会 Test 还会执行第 3 次？

// 第 2 次执行
// ...
console.log(count); // 1
// ....
setInterval(() => {
            console.log(count); // 0
            setCount(count + 1); // 等于 setCount(1)
        }, 500);

请教大家一下，谢谢。

Answer 1

懒计算问题，看看这个文章 解密React state hook