為什么 function 組件中的 setState(hook) 會導致無限循環？

Question

這是代碼：

import React, { useState } from 'react'

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

錯誤。 太多的重新渲染。 React 限制了渲染的數量以防止無限循環。

為什么會導致無限循環？

我認為原因是function 組件只是作為渲染 function setState因此在render函數中設置狀態時會導致無限循環。

有官方解釋嗎？

Answer 1

在每次狀態更新時， React都會重新渲染組件並運行所有函數體，因為setA(2)沒有包含在任何鈎子或函數中，並且是函數/組件體的一部分。 React將在每個渲染周期執行此操作。 這會形成一個無限循環。

在組件掛載時，React 將設置狀態並隨着狀態更新而進行組件更新，再次有狀態更新 React 將再次重新渲染組件。 這個循環將一直持續到 react 達到重新渲染限制。

您可以通過將狀態更新包裝在掛鈎中來避免這種情況。

import React, { useState } from 'react'

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

Answer 2

調用setA時，您實際上會更新狀態變量並觸發組件的重新渲染。

當組件重新渲染時，它將調用setA （在渲染之前）並再次觸發重新渲染。

你能看到無限循環嗎？

傳統上，您將狀態變量更新為回調（即當用戶單擊按鈕時）或在某些條件下。

在您的示例中，您可以直接將a設置為 2

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

如果您想使用a = 1進行第一次渲染，然后立即擁有a = 2 ，則可以使用僅執行一次的效果（因為第二個參數為空數組）

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

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

Answer 3

因為您正在使用setA(2)為狀態設置一個新值，所以每次渲染組件時，狀態都會收到一個新值，從而強制組件再次渲染

Answer 4

const [rows, setRows] = useState([]);
return {
<Component data= {someData}
           selectCallback ={ (rows) => {
                        console.log(rows);
                        setRows(rows); // if set State going infinity loop
}}
...remainProps
/>

它在嘗試 setState 時給出無限循環，如果我們不使用 setRows 那么在控制台中給出正確答案意味着對象數組

幫助表示贊賞。

Answer 5

因為調用setA(2)會導致組件重新渲染。