父组件状态变更时如何重置子组件至初始状态

• 父组件（Parent Component）包含以下子组件：
  • Child Component A
  • Child Component B
• 当前行为：修改父组件状态时，子组件会重新渲染，但内部状态会被保留。
• 需求：修改父组件（Wrapper Component）状态时，子组件需重置至初始状态，效果等同于页面刚加载时的全新状态。

React中，当组件的key属性变化时，会卸载旧组件实例并重新挂载新实例，这会让组件彻底回到初始状态，完美实现页面刷新般的重置效果。

实现步骤 #

1. 在父组件中维护一个用于触发重置的状态（如resetKey）。
2. 将该状态作为key传递给需要重置的子组件。
3. 当需要重置时，更新resetKey的值（比如递增数字、使用时间戳）。

示例代码 #

import { useState } from 'react';

function ParentComponent() {
  const [resetKey, setResetKey] = useState(0);
  const [parentState, setParentState] = useState('初始值');

  const handleUpdateAndReset = () => {
    // 更新resetKey触发子组件重置
    setResetKey(prev => prev + 1);
    // 同时更新父组件状态
    setParentState('更新后的父状态');
  };

  return (
    <div>
      <button onClick={handleUpdateAndReset}>更新父状态并重置子组件</button>
      <ChildComponentA key={resetKey} />
      <ChildComponentB key={resetKey} />
    </div>
  );
}

// 带内部状态的子组件示例
function ChildComponentA() {
  const [childState, setChildState] = useState('子A初始状态');
  return (
    <div>
      <p>子组件A状态：{childState}</p>
      <button onClick={() => setChildState('子A已修改')}>修改子A状态</button>
    </div>
  );
}

function ChildComponentB() {
  const [childState, setChildState] = useState('子B初始状态');
  return (
    <div>
      <p>子组件B状态：{childState}</p>
      <button onClick={() => setChildState('子B已修改')}>修改子B状态</button>
    </div>
  );
}

原理说明 #

• React通过key标识组件唯一性，key变化时会判定为新组件，执行旧组件卸载（含清理逻辑）和新组件挂载（含初始化逻辑），从而让子组件内部状态完全重置。
• 这种方案无需修改子组件内部逻辑，仅在父层通过key控制，是React官方推荐的组件重置方案。

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