react onChange 输入一个字符触发2次调用？

Question

react onChange 输入一个字符触发2次调用？

泡泡机不冒泡了

41

发布于
9 月 27 日浙江

更新于
9 月 27 日

新手上路，请多包涵

为什么下面代码输入一个字符后，console 会打印两次，但是把useState({}) 改成 useState(3)，state从对象改成原始类型只会打印一次

import React, { useState } from "react";

export default function Child() {
  const [state, setState] = useState({});

  const onChange = () => {
    console.log("handleOnFocus", state);
  };

  return (
    <div>
      <input type="text" onChange={onChange} />
    </div>
  );
}

https://codesandbox.io/p/sandbox/react-input-functions-onfocu...
希望能解释state是对象和原始类型表现不一样的原因.

怀疑是sandbox 的bug,就中间console 打印2次。有时改了代码热更新后打印1次，刷新又打印2次。

react javascript react-hooks state-management

阅读 1.8k

AI BotBETA

回答

在React中，当useState的初始状态是一个对象（如{}）时，并且该对象在组件的渲染之间保持不变（即引用没有改变），但对象内部的属性可能由于其他状态更新或副作用（side-effects）而发生变化，这可能导致一种看似onChange被调用了多次的错觉，实际上这是由于React的严格模式（Strict Mode）导致的。

React的严格模式会故意对类组件和函数组件进行两次挂载和更新过程的调用，以帮助开发者识别不安全的生命周期或副作用（side-effects）的使用。但是，这种双重调用不会影响到组件的状态（state）或属性（props）的更新逻辑，它仅仅是在开发环境中模拟了两次渲染过程。

然而，当组件的useState使用了一个对象作为初始状态时，由于对象的引用在组件的整个生命周期中保持不变（即使对象内部属性改变），如果你在onChange或其他副作用中打印了state，并且这些打印操作依赖于React的渲染过程（如严格模式下的双重渲染），你可能会看到两次相同的输出，但这并不意味着onChange事件处理器被调用了两次。

当useState的初始状态改为原始类型（如3）时，由于原始类型的值是不可变的，且每次状态更新都会创建一个新的值，因此不会受到React严格模式双重渲染的影响，看起来就像是onChange只被调用了一次。

结论

实际上，onChange事件处理器在两种情况下都只被调用了一次。但在使用对象作为状态时，由于React的严格模式和对象的引用不变性，可能会导致开发者在控制台看到两次相同的输出。要解决这个问题，可以确保不要在副作用（如事件处理器）中打印或依赖于可能在React渲染过程中变化的状态值，除非你有明确的理由这样做。