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

Question

嗨，我现在正在学习 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 导致错误的确切原因。

Answer 1

发生这种情况是因为，在第一种情况下，当不使用 useEffect 时，
您在声明后立即更新您的状态。
即使你再次将状态设置为false，但是对于react，状态已经更新了。 React 的第一条经验法则是，如果状态更新发生，组件将重新渲染。
这就是为什么你会得到无限的重新渲染。
您的代码遵循以下流程:

声明状态变量并将值传递为 false

将状态更新为 false

状态更新，因此组件重新呈现。

再次执行第 1 步。

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