如何在修改父组件树结构时保留React子组件的状态？

问题场景 #

当修改TheDemo组件的状态m时，子组件TheChild会在<b>和<span>两个父元素间切换，导致TheChild的内部状态v被重置为初始值3。需求是修改m的同时保留v的当前值。

示例代码：

import React, { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";

function TheDemo() {
  const [m, setM] = useState(true);
  const child = <TheChild />;
  return (
    <div style={{ fontFamily: "monospace" }}>
      <button onClick={() => setM(!m)}>m = {+m}</button>
      {m ? <b>{child}</b> : <span>{child}</span>}
    </div>
  );
}

function TheChild() {
  const [v, setV] = useState(3);
  return <button onClick={() => setV(v + 1)}>v = {v}</button>;
}

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <TheDemo />
  </StrictMode>
);

这是典型的X-Y问题，原需求是允许用户调整页面布局，将子组件从一个父容器移动到另一个父容器，且实际场景存在大量嵌套子组件，状态提升方案几乎不可行。

解决方案 #

核心是让React识别出移动的子组件是同一个实例，而非需要重建的新组件。React通过组件的key属性和DOM树位置识别组件身份，以下两种方案均可解决问题：

方案1：给子组件添加稳定的key #

给TheChild指定固定key，确保React在父容器切换时判定为同一个组件实例：

function TheDemo() {
  const [m, setM] = useState(true);
  // 添加唯一且稳定的key
  const child = <TheChild key="fixed-child-key" />;
  return (
    <div style={{ fontFamily: "monospace" }}>
      <button onClick={() => setM(!m)}>m = {+m}</button>
      {m ? <b>{child}</b> : <span>{child}</span>}
    </div>
  );
}

方案2：保持子组件的父容器身份稳定 #

避免让子组件在不同类型的父元素间切换，通过条件修改父元素属性实现布局变化：

function TheDemo() {
  const [m, setM] = useState(true);
  // 动态选择父组件类型，子组件始终挂载在同一逻辑父容器下
  const Wrapper = m ? 'b' : 'span';
  return (
    <div style={{ fontFamily: "monospace" }}>
      <button onClick={() => setM(!m)}>m = {+m}</button>
      <Wrapper><TheChild /></Wrapper>
    </div>
  );
}

原理说明 #

React的组件状态绑定到组件实例上。当子组件在不同父元素间切换且未指定key时，React会判定旧位置组件已卸载、新位置是全新组件，因此销毁旧实例并创建新实例，导致状态丢失。通过指定key或保持父容器逻辑身份稳定，React会复用现有组件实例，从而保留内部状态。

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