useEffect可能出现死循环

来源：1-1 学前必读

weixin_慕圣6334738

2022-04-11

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

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

写回答

2回答

双越

2022-04-12

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

双越

2022-04-12

当你使用 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>
}

//img.mukewang.com/szimg/6254d97809fc6d9910261168.jpg

前端框架及项目面试聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4695 学习 · 1667 问题

查看课程

相似问题

关于第三点 useEffect 里会无限循环，有些疑问

回答 1

useEffect可能出现死循环

回答 1

自定义hook死循环问题

回答 2

关于 useAxios 的 useEffect 传入的依赖，是否可以不写？

回答 1

仅模拟 `class `组件的 `DidUpdate` 生命周期能实现吗？

回答 2

打开慕课网App查看更多内容