相关疑难解决方法(0)

假设我有这个简单的虚拟组件：

const Component = () => {

  const [state, setState] = useState(1);

  setState(1);

  return <div>Component</div>
}

在此代码中，我直接在组件主体中将状态更新为与之前相同的值。但是，即使值保持不变，这也会导致过多的重新渲染。

据我所知，在 中React.useState，如果状态值更新为与之前相同的值 - React 不会重新渲染组件。那么为什么会发生在这里呢？

但是useEffect，如果我尝试在组件主体中而不是直接在组件主体中执行类似的操作：

const Component = () => {

  const [state, setState] = useState(1);

  useEffect(() => {
    setState(1);
  }, [state])

  return <div>Component</div>
}

这不会导致任何无限循环，并且完全符合如果状态保持不变，React 不会重新渲染组件的规则。

所以我的问题是：为什么当我直接在组件主体中执行此操作时会导致无限循环，而在组件主体中却useEffect不会？

有人对此有一些“幕后”解释吗？