useEffect内部不能修改state的疑问

Question

介绍说：

• 依赖为 [] 时： 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>
}

Answer 1

慕移动8149343 2022-04-05 16:40:48

在依赖项为 空数组时， 是会修改state的，因为为空数组时， useEffect在初始化时， 会执行一次

老师课程中讲的不能修改， 是因为，useEffect 里边的轮训，每次拿到的count都是最初的值， 然后每次计算完成后， 数据到 渲染return<div>{count}</div>这里count看起来就不会改变 不会改变就不会渲染。应该就是diff算法优化吧

Answer 2

双越 2021-06-30 19:09:52

你可以在这里插入一行 console.log('exec fn', Date.now()) ，看是否会多次执行？

• 陌小米 #1

  为什么这句打印也是多次执行呢，跟setTnterval一样， 一秒一打印