為什麼React開發模式下useState()會觸發雙重渲染？

開發模式下useState()為什麼會導致兩次渲染？

在React中，使用useState進行狀態管理可能會在state期間觸發兩次渲染更新。此行為歸因於 React 的嚴格模式，該模式透過模擬潛在的副作用來增強開發調試。

考慮以下程式碼片段：

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...

當點擊觸發changeNumber 函數的按鈕時，您可能會觀察到兩個控制台日誌訊號元件重新呈現。這是由於嚴格模式造成的，它強制 useState updaters 等函數在開發環境中執行兩次。

React 的文檔解釋說，嚴格模式透過有意重新調用某些函數（包括狀態更新函數）來檢測並突出顯示潛在的副作用就像傳遞給 useState 的那些一樣。目標是促進調試並確保確定性行為。

要緩解這種雙重渲染，您可以透過從應用程式的入口點刪除以下程式碼來停用嚴格模式：

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

以上是為什麼React開發模式下useState()會觸發雙重渲染？的詳細內容。更多資訊請關注PHP中文網其他相關文章！