為什麼我的 React 元件在嚴格模式下渲染兩次？

為什麼我的 React 元件渲染兩次？

問題：

React 元件是儘管看起來運作正常，但渲染了兩次。最初，它顯示電話號碼和零點，然後使用所有必要的數據進行第二次渲染。是什麼原因導致此問題？

答案：

此行為可能是由於在嚴格模式下運行應用程式所致。

嚴格模式是一個可選標誌在 React 中，它有助於識別渲染階段的潛在副作用。啟用後，它會故意呼叫某些函數兩次，例如 render 方法，以突出顯示任何意外後果。

在這種情況下，意外的重新渲染是由於使用 React.StrictMode 導致的，這會加倍調用渲染函數。要解決此問題，請註解掉 index.js 中的嚴格模式標記以在開發過程中停用它。

其他資訊：

React.StrictMode 可以幫助偵測副作用在渲染階段，例如與 DOM 互動或狀態更新。透過故意呼叫函數兩次，它會突出顯示任何可能會被忽略的意外行為。

React.StrictMode 的官方文件提供了有關嚴格模式下重新渲染的潛在原因的更多資訊：

https://reactjs.org/docs/strict-mode.html# detecting-unexpected-side-effects

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