我要评论
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 事件触发多次的问题时，务必检查：
- 是否启用了严格模式: 在开发环境中，严格模式会触发两次渲染。
- 状态类型: 使用原始类型状态可以避免因引用类型变化导致的重复渲染。
- 事件处理函数: 确保事件处理函数内部逻辑正确，避免不必要的重复状态更新。 (在上面的修改代码中，我们添加了事件参数e，并使用e.target.value来获取输入值，更清晰地展示了状态更新。)
理解 react 严格模式及其对不同数据类型的影响，对于编写高效、可预测的 react 应用至关重要。 在生产环境中，通常会禁用严格模式，从而避免性能问题。
以上就是为什么 react 中 onchange 事件会触发多次？与 state 类型和严格模式有何关系？的详细内容，更多请关注代码网其它相关文章！
![为什么使用正则表达式 /\[1-9\]\\d\*$/ 时，-1 会被判定为匹配成功？](https://images1.3wcode.com/3wcode/20250329/s_0_202503292304303152.jpg)
发表评论