為什么React的onChange事件會在輸入字符后觸發多次？

深入探討React onChange事件觸發多次的根本原因

在React開發中，onChange事件觸發多次是一個常見問題，尤其是在輸入框中輸入字符時。本文將深入探討此現象背后的原因，并提供解決方案。

讓我們先看一個示例代碼：

import React, { useState } from "react";  export default function MyComponent() {   const [inputValue, setInputValue] = useState({}); // 注意此處為對象類型    const handleChange = (event) => {     setInputValue(event.target.value);     console.log("onChange triggered:", inputValue);   };    return (     <div>       <input type="text" onChange={handleChange} />     </div>   ); }

在這個例子中，如果useState的初始值是一個對象{}，那么每次輸入都會導致onChange觸發多次。然而，如果將初始值改為一個原始類型，例如useState(“”)，問題則消失。為什么呢？

這并非React的bug，而是React嚴格模式(StrictMode)以及狀態更新的異步特性共同作用的結果。

1. React 嚴格模式:

在開發環境中，啟用嚴格模式會執行額外的檢查，其中包括兩次渲染組件。第一次渲染用于檢測副作用，第二次渲染才是實際的dom更新。

2. 狀態更新的異步特性:

React中的狀態更新是異步的。這意味著setInputValue不會立即更新組件的狀態，而是排隊等待下一個渲染周期。

當使用對象作為狀態時:

• 第一次渲染：組件渲染，inputValue 為{}。
• 輸入字符：onChange觸發，setInputValue被調用，但inputValue 并未立即更新。
• 第二次渲染：React檢測到狀態更新，重新渲染組件。此時inputValue 更新為新的值。onChange再次觸發，打印更新后的值。

當使用原始類型作為狀態時:

• 第一次渲染：組件渲染，inputValue 為””。
• 輸入字符：onChange觸發，setInputValue被調用，雖然更新是異步的，但原始類型的更新不會觸發額外的渲染。

解決方案:

為了避免onChange事件觸發多次，可以使用以下方法：

• 使用函數式更新: 利用setInputValue的函數式更新方式：

const handleChange = (event) => {   setInputValue((prevState) => ({...prevState, value: event.target.value}));   console.log("onChange triggered:", inputValue); };

• 使用防抖或節流: 如果需要對輸入進行頻繁操作，可以使用防抖或節流技術來限制onChange的觸發頻率。

• 避免在onChange中直接使用state: 可以將輸入值存儲在一個中間變量中，并在需要的時候更新狀態。

通過理解React嚴格模式和狀態更新機制，我們可以有效地解決onChange事件觸發多次的問題，編寫更高效、更穩定的React代碼。 記住，選擇合適的初始狀態類型（原始類型通常更簡單）以及使用函數式更新是關鍵。