useEffect内部不能修改state的疑问

来源：14-16 Hooks使用中的几个注意事项

weixin_慕圣3479985

2021-06-30

介绍说：

依赖为 [] 时： re-render 不会重新执行 effect 函数
没有依赖：re-render 会重新执行 effect 函数
那就是说如果依赖为[]，rerender的时候，useEffect里的函数不会重新执行。既然都不会重新执行，就触发不了setCount(++countRef.current)? 那为什么countRef还能不断+1呢？

function UseEffectChangeState() {
    const [count, setCount] = useState(0)
    const countRef = useRef(0)
    useEffect(() => { // 这个函数re-render的时候不会执行，那为什么可以执行到里面的setCount(++countRef.current)呢？
        console.log('useEffect...', count)

        // 定时任务
        const timer = setInterval(() => {
            console.log('setInterval...', countRef.current)
            // setCount(count + 1)
            setCount(++countRef.current)
        }, 1000)
        return () => clearTimeout(timer)
    }, []) // 依赖为 []

    // 依赖为 [] 时： re-render 不会重新执行 effect 函数
    // 没有依赖：re-render 会重新执行 effect 函数

    return <div>count: {count}</div>
}