React 输入框 onChange 事件触发两次的疑难解答

在 React 应用开发中，输入框的 onChange 事件有时会出人意料地触发两次。这尤其在使用 useState 钩子管理对象状态时明显，而使用基本数据类型则不会出现此问题。本文将解释这种现象背后的原因。

问题表现：在输入框输入单个字符，控制台输出两次 onChange 事件回调。使用 useState({}) 时出现此问题，但 useState(3) 则只触发一次。

根本原因：React 的 StrictMode 模式。在开发环境中，StrictMode 会故意进行两次渲染，以帮助开发者识别潜在的副作用和不纯函数。第一次渲染用于检测副作用，第二次渲染才是实际的 DOM 更新。

对象类型与副作用：当状态为对象类型时，由于对象是引用类型，React 会认为存在潜在的副作用，因此进行两次渲染，从而触发两次 onChange 事件。基本数据类型则不会触发此问题，因为它们是值类型，不会产生副作用。

React 纯函数假设：React 假设每个组件都是纯函数，这意味着相同的输入（props、state、context）应该始终产生相同的输出。StrictMode 通过两次调用函数来帮助开发者发现不纯的代码。

结论：onChange 事件触发两次并非 bug，而是 StrictMode 在开发环境中的一种保护机制，旨在提高代码健壮性。生产环境中，由于 StrictMode 默认禁用，此问题不会出现。 因此，开发者无需为此修改代码，这是一种正常的开发环境行为。