javascript - 为什么函数组件中的 setState(hook) 会导致无限循环？

Question

这是代码:

import React, { useState } from 'react'

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

Error. Too many re-renders. React limits the number of renders to prevent an infinite loop.

为什么会导致无限循环？

我认为原因是功能组件就像 渲染函数 ，所以setState时会导致死循环在 render功能。

有官方解释吗？

Answer 1

在每个状态更新 React将重新渲染组件并运行所有函数体，如 setA(2)不包含在任何钩子(Hook)或函数中，并且是函数/组件主体的一部分。 React将在每个渲染周期执行此操作。这会形成一个无限循环。
在组件挂载时，React 将设置状态并随着状态更新而进行组件更新，再次有状态更新 React 将再次重新渲染组件。这个循环将一直持续到 react 达到重新渲染限制。
您可以通过将状态更新包装在 Hook 中来避免这种情况。

import React, { useState } from 'react'

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