為什么 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 應用至關重要。 在生產環境中，通常會禁用嚴格模式，從而避免性能問題。