React输入组件重渲染失焦问题：两种实现的差异与解决

核心差异与失焦原因 #

示例1的渲染逻辑 #

示例1中，<input>直接在myComponent的返回值内渲染。每次组件重渲染（比如setSt触发状态更新、Math.random()导致的强制重渲染），React会复用已存在的DOM节点——因为这个<input>在组件渲染树中是固定身份的元素，React仅会更新它的value属性，不会销毁重建DOM，因此输入框不会失焦。

示例2的失焦根源 #

示例2的问题核心在于capturedComponent的创建逻辑：

• 每次MyComponent重渲染（输入触发setSt时必然触发），都会生成一个全新的capturedComponent函数。
• 当这个新函数作为capture props传给MyHelper时，React会判定MyHelper渲染的<ActualComponent />是一个全新的组件类型。
• React的更新规则是：若组件类型发生变化，会销毁旧DOM节点并创建新节点。旧输入框DOM被销毁后，新创建的输入框自然会丢失焦点。

注：示例1中的Math.random()仅触发重渲染，但不会改变输入框的组件身份；示例2的问题本质并非Math.random()，而是每次重渲染都生成新的渲染函数，导致DOM被重建。

修复方案（保留示例2的代码结构） #

要解决问题，关键是让渲染逻辑在重渲染时保持稳定，确保React能识别并复用DOM节点，以下是两种可行方案：

方案1：用useCallback缓存渲染函数 #

通过useCallback缓存capturedComponent，确保每次重渲染时它的引用保持一致：

import { useState, useCallback } from 'react';

function StateHelper() {
  const [st, setSt] = useState("");

  return { context: { st, setSt } };
}

function MyHelper(prop) {
  const ActualComponent = prop.capture;

  return <ActualComponent />;
}

function MyComponent() {
  const { context } = StateHelper();

  // 用useCallback缓存，依赖项为context中的状态与更新函数
  const capturedComponent = useCallback(() => (
    <input
      value={context.st}
      onChange={(e) => {
        context.setSt(e.target.value);
      }}
    />
  ), [context.st, context.setSt]);

  return <MyHelper capture={capturedComponent} />;
}

方案2：调整MyHelper直接渲染元素 #

修改MyHelper的逻辑，让它直接接收并渲染元素而非组件函数，避免组件类型变化：

import { useState } from 'react';

function StateHelper() {
  const [st, setSt] = useState("");

  return { context: { st, setSt } };
}

// 修改MyHelper，直接渲染传入的子元素
function MyHelper({ children }) {
  return children;
}

function MyComponent() {
  const { context } = StateHelper();

  return (
    <MyHelper>
      <input
        value={context.st}
        onChange={(e) => {
          context.setSt(e.target.value);
        }}
      />
    </MyHelper>
  );
}

对React重渲染的理解 #

React重渲染的核心是虚拟DOM树对比：

• 当组件状态/ props变化时，React会生成新的虚拟DOM树，与旧树进行对比。
• 若两个节点的类型（如<input>对应"input"类型，自定义组件对应组件引用）和key完全一致，React会复用对应的DOM节点，仅更新变化的属性。
• 若类型不一致，React会销毁旧DOM并创建新DOM，这会导致元素丢失状态（如输入框焦点、已输入内容）。

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