為什麼在嚴格模式下元件每次狀態更新都會渲染兩次？

了解狀態更新和元件渲染

儘管沒有明確啟用嚴格模式，但元件在每次狀態更新時渲染兩次的問題源自於使用React的嚴格模式。

在React中，App元件被包裝在React.StrictMode中：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

根據React的文件：

Strict模式無法自動為您偵測副作用，但它可以透過使副作用更具確定性來幫助您發現它們。這是透過有意雙重呼叫以下函數來完成的：

• 狀態更新器函數（setState 的第一個參數）
• 傳遞給useState、useMemo 或useReducer 的函數

在您的範例中，傳遞給onClick 處理程序的chaneNumber 函數使用useState 觸發狀態更新。因此，React 故意在開發模式下雙重呼叫此函數。這就是導致元件在每次狀態更新時渲染兩次的原因。

此行為旨在幫助開發人員識別狀態更新引起的潛在副作用或效能問題。透過運行該函數兩次，React 確保任何副作用都消失兩次，從而更容易調試和解決任何潛在問題。

以上是為什麼在嚴格模式下元件每次狀態更新都會渲染兩次？的詳細內容。更多資訊請關注PHP中文網其他相關文章！