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

在嚴格模式下React 元件渲染兩次

在嚴格模式下，React 有意兩次調用組件渲染函數以檢測潛在的副作用。透過渲染元件兩次，此行為會變得明顯。

在提供的程式碼範例中，Update 元件渲染兩次，因為它在嚴格模式下運作。當您註解掉 index.js 中的嚴格模式標記時，問題就解決了，而且元件只渲染一次。

React.StrictMode 是一項開發模式功能，可協助辨識渲染階段的意外副作用。它透過複製渲染函數來實現這一點，這可以揭示可能被忽視的問題。

根據 React 文檔，渲染過程中意外的副作用可能由以下原因引起：

• 在組件渲染函數之外調用 Hook
• 渲染期間從 DOM讀取
• 存取在渲染期間傳遞給組件的引用
• 改變渲染函數中的狀態
• 從組件的渲染函數中觸發父組件的狀態變更

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