【踩坑记】从“输入框自动失去焦点”到“React状态的保留与重置”

近期解决了一个项目中react状态更新相关的小bug，简单记录一下问题出现的原因及解决方案。

一、bug现场：输入框自动失去焦点

首先，大家观察一下以下代码有什么问题。

import { useState } from "react";

export default function MyComponent(props) {
  const { type = "input" } = props;
  const [text, setText] = useState("");

  const MyField = () => {
    switch (type) {
      case "input":
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
      // 此处省略其他case
      default:
        return null;
    }
  };

  return (
    <>
      <MyField />
      {/* 此处有其他子组件 */}
      <span>其他子组件...</span>
    </>
  );
}

感兴趣的小伙伴可以运行以下代码片段

jcode

我们可以发现，每按下一次键盘，输入框就自动失去了焦点。

二、原因解析

我在组件内部直接定义一个输入框， MyComponent 的每次渲染创建了不同的 MyField 函数。
而在同一个位置渲染不同的组件时， React 会重置该位置组件的整个子树的所有状态
(这意味着将旧的组件从 UI 树中移除了并销毁了它的状态，再创建新的组件)。
这会导致错误和性能问题。

为了避免这个问题，我们应总是在顶层声明组件函数，不要嵌套它们的定义。

（ps, React新文档中有类似的错误案例和更详细的解析——对 state 进行保留和重置）

三、解决方法

（1）在jsx中写判断逻辑

import { useState } from "react";

export default function MyComponent(props) {
  const { type = "input" } = props;
  const [text, setText] = useState("");

  return (
    <>
      {type === "input" && (
        <input value={text} onChange={(e) => setText(e.target.value)} />
      )}
      {/* 此处省略其他判断... */}
      {/* 此处有其他子组件 */}
      <span>其他子组件...</span>
    </>
  );
}

（2）在顶层声明子组件，在子组件中写判断逻辑

import { useState } from "react";

export default function MyComponent(props) {
  return (
    <>
      <MyField type={props.type} />
      {/* 此处有其他子组件 */}
      <span>其他子组件...</span>
    </>
  );
}

function MyField(props) {
  const { type = "input" } = props;
  const [text, setText] = useState("");

  switch (type) {
    case "input":
      return <input value={text} onChange={(e) => setText(e.target.value)} />;
    // 此处省略其他case
    default:
      return null;
  }
}

四、小结：关于React状态的保留与重置

1. 相同位置的相同组件会使得 state 被保留下来；
2. 相同位置的不同组件会使 state 重置；
3. 如何重置组件的状态：① 将组件渲染在不同的位置；② 为一个子树指定一个不同的 key。
   tips:(位置指的是组件在 UI 树中的位置,而不是在 JSX 中的位置)