嗨,我现在正在学习 React 并且遇到了状态问题..
我知道当状态改变时,组件会重新渲染并且 UseEffect widout depth 中的代码只运行一次。
但是当我在 JSX 或渲染语法中编写 setState 时,我无法确切解释为什么会发生无限渲染。
下面的代码导致无限重新渲染
import React, { useState, useEffect } from 'react'
const index = () => {
const [active, setActive] = useState(false);
console.log("render", active);
setActive(false);
return (
<div>
</div>
)
}
export default index
但是下面的代码即使不断调用 setState 也没有问题。import React, { useState, useEffect } from 'react'
const index = () => {
const [active, setActive] = useState(false);
console.log("render", active);
useEffect(() => {
setInterval(()=>{
console.log("run")
setActive(true)
},0);
}, [])
return (
<div>
</div>
)
}
无论状态值如何,setState 是否都会触发重新渲染?我想知道在 useEffect 之外使用 setState 导致错误的确切原因。
最佳答案
发生这种情况是因为,在第一种情况下,当不使用 useEffect 时,
您在声明后立即更新您的状态。
即使你再次将状态设置为false,但是对于react,状态已经更新了。 React 的第一条经验法则是,如果状态更新发生,组件将重新渲染。
这就是为什么你会得到无限的重新渲染。
您的代码遵循以下流程:
在第二种情况下,使用 use effect 时,您的状态只会在组件被挂载时更新,这意味着之后任何状态更新都不会触发您的 useEffect。
关于javascript - 为什么即使状态没有改变,setState 也会导致太多的重新渲染错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68860542/