如何以可扩展方式在父组件切换时保留子组件及其子节点的状态？

有状态的GrandParent组件会渲染ParentOne或ParentTwo中的一个，但这两个父组件都会渲染同一个有状态的Child组件。当父组件切换时，我希望保留Child组件（及其可能存在的有状态子组件）的状态。

示例代码 #

function Child() {
  const [myState, setMyState] = React.useState(false);

  return (
    <div>
      <p>Is state modified: {myState.toString()}</p>
      <button onClick={() => setMyState(true)}>Modify state</button>
    </div>
  );
}

function ParentOne({ children }) {
  return (
    <div className="parent-one">{children}</div>
  );
}

function ParentTwo({ children }) {
  return (
    <div className="parent-two">{children}</div>
  );
}

function GrandParent() {
  const [isTrue, setIsTrue] = React.useState(true);

  const Parent = isTrue ? ParentOne : ParentTwo;

  return (
    <div className="grand-parent">
      <button onClick={() => setIsTrue(!isTrue)}>Toggle parent</button>
      <Parent>
        <Child />
      </Parent>
    </div>
  );
}

ReactDOM.render(<GrandParent />, document.querySelector("#root"));

现有方案的局限性 #

• 将Child的状态移到GrandParent：实际场景中存在多个依赖GrandParent其他状态的Child组件，每个Child自身及子组件都有状态，这种方案扩展性差；且子组件（非父组件）卸载时，状态无法自动重置，不符合需求。
• 把父组件渲染逻辑下移到子组件：每个子组件单独渲染父组件，违反DRY原则，只是将问题从GrandParent转移到子组件。

注意：示例中ParentOne和ParentTwo可通过props合并，但实际应用中二者差异极大，无法合并。

核心问题 #

如何以可扩展的方式，在父组件切换时保留任意数量有状态子组件的状态？

1. 状态容器+React.cloneElement（推荐） #

在GrandParent中维护一个对象作为状态容器，存储所有Child的状态，给每个Child分配唯一标识，通过React.cloneElement把状态和更新方法传递给Child。切换父组件时状态不会丢失，子组件卸载时可清理对应状态。

修改示例：

// Child改为受控组件
function Child({ myState, setMyState }) {
  return (
    <div>
      <p>Is state modified: {myState.toString()}</p>
      <button onClick={() => setMyState(true)}>Modify state</button>
    </div>
  );
}

// ParentOne、ParentTwo保持不变

function GrandParent() {
  const [isTrue, setIsTrue] = React.useState(true);
  // 用对象存储多个Child的状态，key为Child唯一标识
  const [childStates, setChildStates] = React.useState({
    child1: false,
    child2: false
  });
  const Parent = isTrue ? ParentOne : ParentTwo;

  // 更新指定Child的状态
  const updateChildState = (childId, newState) => {
    setChildStates(prev => ({
      ...prev,
      [childId]: newState
    }));
  };

  return (
    <div className="grand-parent">
      <button onClick={() => setIsTrue(!isTrue)}>Toggle parent</button>
      <Parent>
        {React.cloneElement(<Child />, {
          myState: childStates.child1,
          setMyState: (val) => updateChildState('child1', val)
        })}
        {React.cloneElement(<Child />, {
          myState: childStates.child2,
          setMyState: (val) => updateChildState('child2', val)
        })}
      </Parent>
    </div>
  );
}

这种方式可轻松扩展到任意数量的Child，子组件卸载时只需删除childStates中对应key即可自动重置状态。

2. 独立状态Wrapper组件 #

给每个有状态的Child创建对应的Wrapper组件，把Child的状态放在Wrapper中。由于Wrapper不会随父组件切换而卸载，状态得以保留。

示例：

// Child改为受控组件
function Child({ myState, setMyState }) {
  return (
    <div>
      <p>Is state modified: {myState.toString()}</p>
      <button onClick={() => setMyState(true)}>Modify state</button>
    </div>
  );
}

// 封装状态的Wrapper
function ChildWrapper() {
  const [myState, setMyState] = React.useState(false);
  return <Child myState={myState} setMyState={setMyState} />;
}

function GrandParent() {
  const [isTrue, setIsTrue] = React.useState(true);
  const Parent = isTrue ? ParentOne : ParentTwo;

  return (
    <div className="grand-parent">
      <button onClick={() => setIsTrue(!isTrue)}>Toggle parent</button>
      <Parent>
        <ChildWrapper />
      </Parent>
    </div>
  );
}

这种方式保持了组件的内聚性，扩展时只需新增对应Wrapper即可，适合状态无需跨组件共享的场景。

3. useRef存储状态（轻量方案） #

如果Child状态无需触发频繁重渲染，可在GrandParent中用useRef存储状态，再传递给Child。需要更新UI时手动触发重渲染。

示例：

function Child({ myState, setMyState }) {
  return (
    <div>
      <p>Is state modified: {myState.toString()}</p>
      <button onClick={() => setMyState(true)}>Modify state</button>
    </div>
  );
}

function GrandParent() {
  const [isTrue, setIsTrue] = React.useState(true);
  const childStateRef = React.useRef(false);
  const Parent = isTrue ? ParentOne : ParentTwo;

  const updateChildState = (newVal) => {
    childStateRef.current = newVal;
    // 手动触发重渲染
    setIsTrue(prev => prev);
  };

  return (
    <div className="grand-parent">
      <button onClick={() => setIsTrue(!isTrue)}>Toggle parent</button>
      <Parent>
        <Child myState={childStateRef.current} setMyState={updateChildState} />
      </Parent>
    </div>
  );
}

该方案轻量，但需手动管理重渲染，适合状态逻辑简单的场景。

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