為什麼 React 中 onChange 事件會觸發多次？與 state 類型和嚴格模式有何關係？

React onChange事件觸發多次：深入探究其原因

在React 應用開發中， onChange事件觸發多次的情況時有發生，這常常令人困惑。本文將詳細分析此問題，並探討其與useState類型和嚴格模式的關係。

以下示例代碼演示了這個問題：輸入一個字符，控制台會打印兩次日誌。然而，將useState({})替換為useState(3) （將狀態類型從對象改為原始類型），日誌只會打印一次。這說明狀態類型會影響onChange事件的觸發次數。

 import React, { useState } from "react";

export default function Child() {
  const [state, setState] = useState({}); // 更改為useState(3) 則只觸發一次const onChange = (e) => { // 注意添加事件參數e
    console.log("onChange triggered", state, e.target.value); // 添加輸出e.target.value
    setState({...state, value: e.target.value}); //更新state
  };

  return (
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  );
}

這種現象與React 的嚴格模式(StrictMode) 密切相關。在開發環境中啟用嚴格模式，React 會故意進行兩次渲染，以幫助開發者儘早發現潛在問題，例如不必要的副作用。這兩次渲染分別用於檢測副作用和實際的DOM 更新。

當狀態為對像類型時，由於對像是引用類型，在setState 後，對象的引用地址發生了變化。 React 在嚴格模式下，會檢測到這種變化，從而觸發兩次渲染，導致onChange事件被調用兩次。而原始類型（如數字）則不會出現這種情況，因為其值本身被直接更新，不會產生新的引用地址。

React 文檔中強調，組件應盡可能保持為純函數，即相同的輸入（props、state 和context）應該始終產生相同的輸出。嚴格模式通過兩次渲染來幫助開發者識別違反此規則的情況。

因此，在開發過程中遇到onChange事件觸發多次的問題時，務必檢查：

1. 是否啟用了嚴格模式: 在開發環境中，嚴格模式會觸發兩次渲染。
2. 狀態類型: 使用原始類型狀態可以避免因引用類型變化導致的重複渲染。
3. 事件處理函數: 確保事件處理函數內部邏輯正確，避免不必要的重複狀態更新。 (在上面的修改代碼中，我們添加了事件參數e ，並使用e.target.value來獲取輸入值，更清晰地展示了狀態更新。)

理解React 嚴格模式及其對不同數據類型的影響，對於編寫高效、可預測的React 應用至關重要。 在生產環境中，通常會禁用嚴格模式，從而避免性能問題。

以上是為什麼 React 中 onChange 事件會觸發多次？與 state 類型和嚴格模式有何關係？的詳細內容。更多資訊請關注PHP中文網其他相關文章！