如何在不强制重新挂载的情况下重新初始化React组件？

目前React原生并不支持不重新挂载组件但完全重置组件实例的操作。原因在于React的组件实例与DOM节点是强绑定的：一旦组件完成挂载，对应的实例会一直存在直到组件被卸载，React不会在不触发卸载的情况下创建新的组件实例。

你提到的用key属性触发重置的方式，本质是利用了React的diff算法规则：当组件的key发生变化时，React会判定这是一个全新的组件，因此会卸载旧实例并挂载新实例——这确实会触发完整的重新挂载流程，哪怕VDOM结构没有变化。

不过你可以通过以下方案，在不重新挂载组件的前提下实现类似“完全初始化”的效果：

1. 监听触发props，手动重置所有状态与属性 #

在子组件内部监听用于触发重置的props（也就是你从父组件传递的那个状态），当props变化时，手动重置组件的内部state和自定义属性：

• 类组件示例：

class Child extends React.Component {
  state = { count: 0 };
  customProperty = 'initial_value';

  componentDidUpdate(prevProps) {
    // 检测触发重置的props是否变化
    if (prevProps.resetSignal !== this.props.resetSignal) {
      // 重置内部state
      this.setState({ count: 0 });
      // 重置自定义属性
      this.customProperty = 'initial_value';
    }
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

• 函数组件示例（用useRef存储自定义属性）：

function Child({ resetSignal }) {
  const [count, setCount] = useState(0);
  const customProperty = useRef('initial_value');

  useEffect(() => {
    // 当resetSignal变化时，重置状态和自定义属性
    setCount(0);
    customProperty.current = 'initial_value';
  }, [resetSignal]);

  return <div>Count: {count}</div>;
}

2. 将组件状态与属性完全依赖于props #

如果子组件的内部状态和自定义属性都可以从props派生，那可以直接让它们依赖触发重置的props，这样每次props变化时，相关状态和属性会自动“初始化”：

function Child({ resetSignal }) {
  // 利用resetSignal作为初始化state的依赖
  const [count, setCount] = useState(() => {
    // 每次resetSignal变化时，重新计算初始count
    return resetSignal ? 0 : getDefaultCount();
  });

  // 用useMemo让自定义属性依赖resetSignal
  const customProperty = useMemo(() => {
    return resetSignal ? 'initial_value' : getDefaultCustomProp();
  }, [resetSignal]);

  return <div>Count: {count}</div>;
}

总结来说，React的核心设计逻辑决定了它不会提供“不卸载重置组件实例”的能力，但通过上述手动重置或props驱动的方式，完全可以实现你需要的“全新组件状态”效果，同时避免重新挂载带来的开销。

内容的提问来源于stack exchange，提问作者黄雨伞