为什么 setState 会导致太多重新渲染错误，即使状态没有改变

Question

嗨，我现在正在学习React，遇到了一些问题。

我知道当状态改变时，组件会重新渲染，而UseEffect中没有深度的代码只运行一次。但我不能解释为什么无限渲染发生时，我写setState在JSX或在渲染语法。

下面的代码导致无限重渲染

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会导致错误的确切原因。

Answer 1

这是因为，在第一种情况下，当不使用useEffect时，你在声明状态后就更新了状态。即使你再次将状态设置为false，但是对于react来说，状态已经更新了。react的第一条经验法则是，如果状态更新发生，组件会重新渲染。

这就是为什么你得到一个无限重渲染。

您的代码遵循以下流程:

1. 声明状态变量并传递值为false
2. 更新状态为false
3. 状态更新，因此组件重新渲染。
4. 步骤1。

在第二种情况下，当使用use effect时，你的状态只会在组件被挂载时更新，这意味着，在此之后，任何状态更新都不会触发你的useEffect。

Answer 2

基于React文档:https://reactjs.org/docs/hooks-reference.html#usestate

setState函数用于更新状态。它接受一个新的状态值，并排队重新呈现组件。

还有一个附加:https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update

如果你将State Hook更新为与当前状态相同的值，React将在不渲染子元素或触发效果的情况下跳出。(React使用Object。是比较算法。)请注意，React在退出之前可能仍然需要再次渲染该特定组件。

这里是重要的部分:React可能仍然需要在退出之前再次渲染该特定组件.

所以，即使值是相同的，组件仍然可以渲染。