Javascript 为什么函数组件中的setState（hook）会导致无限循环？

代码如下：

import React，{useState}来自“React”
函数App（）{
常数[a，setA]=useState（1）
setA（2）
返回(
{a}
);
}

错误。太多的重新渲染。React限制渲染的数量以防止无限循环

为什么它会导致无限循环

我认为原因是函数组件就像渲染函数一样，因此在

渲染

函数中设置状态时会导致无限循环

---

是否有任何官方解释？

在每次状态更新时，

React

将重新呈现组件并运行所有函数体，因为

setA（2）

不包含在任何挂钩或函数中，而是函数/组件体的一部分<代码>反应将在每个渲染周期执行此操作。这是一个无限循环

在组件安装时，React将设置状态并在状态更新时进行组件更新，再次出现状态更新React将再次重新渲染组件。此循环将继续，直到react达到重新渲染限制

您可以通过将状态更新包装在钩子中来避免这种情况

import React, { useState } from 'react'

function App() {
  const [a, setA] = useState(1)
  useEffect(() => {
    setA(2)
  },[]);
  
  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}

import React，{useState}来自“React”
函数App（）{
常数[a，setA]=useState（1）
useffect（（）=>{
setA（2）
},[]);
返回(
{a}
);
}

因为您正在使用

setA（2）

为状态设置一个新值，所以每次呈现组件时，状态都会收到一个新值，迫使组件在调用

setA

时再次呈现。实际上，您更新了一个状态变量，并触发组件的重新呈现

当组件重新渲染时，它将调用

setA

（就在渲染之前），并将再次触发重新渲染

你能看到无限循环吗

传统上，您将状态变量更新为回调（即当用户单击按钮时）或在特定条件下

在您的示例中，您可以直接将

a

设置为2

function App() {
  const [a, setA] = useState(2)
  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}

---

如果您更新状态-您的组件将再次重新渲染，并在每次重新渲染组件时设置一个调用的函数。为什么不

使用effect（（）=>setA（2），[a]）

跳过效果而不是传递空数组？这取决于您期望的行为，在第二个参数中使用

[a]

，每次更新

a

时，您都会将

a

重置为

2

，因此

a

基本上不允许有

2

以外的值（它可以在很短的时间内等于其他值，并将立即取值

2

）。使用

[]

，效果将只应用一次，

a

可以为下一个渲染获取另一个值谢谢，现在我知道了“挂钩”的含义。它就像功能组件和react之间的桥梁。确切地说，挂钩使您能够在功能组件内与react的内容（如状态、引用、生命周期方法）交互

function App() {
  const [a, setA] = useState(2)
  useEffect(() => setA(2), [])

  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}