输入组件按键后失焦，但内联JSX正常的问题求助

我正在构建一个包含多个输入框的页面，自定义MyInput组件每次按键后都会失去焦点，但内联JSX写法的输入框却能正常工作。MyInput的实现逻辑和内联JSX基本一致，不清楚问题出在哪。

问题原因 #

你是在父组件内部定义的MyInput组件，每次父组件因状态更新触发渲染时，MyInput都会被重新创建成一个全新的组件类型。React会把它识别为不同的组件，卸载旧的MyInput再挂载新的，这就导致了输入框失去焦点。而内联的<input>是原生DOM元素，不会有这个问题。

解决方法 #

方法一（推荐）：将组件移到父组件外部定义

把MyInput放在父组件（比如App）的外面，确保它在每次渲染时都是同一个组件类型：

// 移到App组件外部
const MyInput = () => {
  return <input />;
};

function App() {
  // 你的状态和其他逻辑
  return (
    <div>
      <MyInput />
      <input />
    </div>
  );
}

方法二：用useMemo缓存内部组件（不推荐）

如果因为业务限制必须在父组件内部定义MyInput，可以用useMemo缓存组件，避免每次渲染都重新创建：

import { useMemo } from 'react';

function App() {
  const MyInput = useMemo(() => {
    return () => <input />;
  }, []); // 空依赖数组确保只创建一次

  return (
    <div>
      <MyInput />
      <input />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者flyisland