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 (
    

      
    
  );
}

在这个例子中，如果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代码。 记住，选择合适的初始状态类型（原始类型通常更简单）以及使用函数式更新是关键。