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

Question

您好，我现在正在学习 React，但遇到了状态问题..

我知道当状态改变时，组件会重新渲染，UseEffect 中的代码只运行一次。 但是我无法准确解释为什么我在 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 会导致错误的确切原因。

Answer 1

发生这种情况是因为，在第一种情况下，当未使用 useEffect 时， 您在声明后立即更新您的状态。 即使您再次将状态设置为 false，但对于响应，状态已更新。 React 的第一条经验法则是，如果发生状态更新，组件将重新渲染。

这就是您获得无限重新渲染的原因。

您的代码遵循以下流程：

1. 声明状态变量并将值传递为 false
2. 将状态更新为 false
3. 状态已更新，因此组件重新呈现。
4. 再次执行第 1 步。

在第二种情况下，使用了useEffect，你的状态只有在组件被挂载时才会更新，这意味着之后任何状态更新都不会触发你的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.is 比较算法。）请注意，React 可能仍需要在退出之前再次渲染该特定组件。

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

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