useEffect可能出现死循环

Question

之前问了这个问题但是慕课不允许在回复中粘贴图片,就重新发下, 问题就是视频14-16中你讲Hook使用中的几个注意事项出现的

老师我没有明白问什么你用myCount 之后它就能够更新了, 能说下具体的原理吗, 没听清您视频说的
希望尽可能详细的解释一下

Answer 1

双越 2022-04-12 09:48:47

参考 https://coding.imooc.com/learn/questiondetail/264713.html 

Answer 2

双越 2022-04-12 09:48:29

当你使用 count 时，下面代码的 'render...' 和 'useEffect...' 会死循环的一直打印，说明组件在不停的自动渲染。

原因就是：当 count 改变时，会触发组件重新渲染，因为 count 是 state 。而 myCount 不是 state ，它改变不改变，跟组件渲染没关系。

（注意看代码中的一行注释）

import React, { useState, useEffect } from 'react'

export default function MyComponent () {
    const [count, setCount] = useState(0)
    
    console.log('render...')
    
    useEffect(() => {
        console.log('useEffect...', count)
        const timer = setInterval(() => {
            setCount(count + 1)
        })
        
        return () => clearInterval(timer)
    }, [count]) // eslint 提示，这里必须有 [count] ，因为 useEffect 函数内部有 count
    
    return <p>
        {count}
    </p>
}