React中如何卸载组件？步骤切换场景下的组件卸载问题

这问题我之前做表单流程的时候也碰到过，核心就是React默认会尽可能复用组件，导致你回退到步骤2时，Step3只是被隐藏而非真正卸载，所以它的初始化逻辑不会重新执行，自然没法同步Step2的最新配置。给你几个实用的解决办法：

方法1：给每个步骤组件添加唯一key属性 #

React的Diff算法会通过key来判断组件是否需要重新创建/卸载。只要给每个步骤组件分配不同的key，当步骤切换时，不匹配的组件就会被彻底卸载，下次进入对应步骤时会重新挂载并执行初始化逻辑。

修改你的渲染代码如下：

render() {
  // ...some code to determine step
  return (
    <>
      {step === 1 && <Step1 key="step-1" />}
      {step === 2 && <Step2 key="step-2" />}
      {step === 3 && <Step3 key="step-3" />}
    </>
  )
}

当你从步骤3切回步骤2时，key="step-3"的Step3组件会被卸载，再次进入步骤3时，React会重新创建Step3实例，此时它就能拿到Step2的最新配置了。

方法2：使用Switch式的条件渲染 #

把步骤组件的渲染逻辑改成switch语句，每次只返回当前步骤对应的组件。这种方式下，非当前步骤的组件不会被包含在渲染树中，自然会被卸载。

示例代码：

render() {
  // ...some code to determine step
  let currentStepComponent;
  switch(step) {
    case 1:
      currentStepComponent = <Step1 />;
      break;
    case 2:
      currentStepComponent = <Step2 />;
      break;
    case 3:
      currentStepComponent = <Step3 />;
      break;
    default:
      currentStepComponent = null;
  }
  return currentStepComponent;
}

这种写法逻辑更清晰，也能确保只有当前步骤的组件存在于DOM中，完全避免了组件被隐藏但未卸载的问题。

方法3：让Step3组件监听依赖配置的变化 #

如果不想卸载Step3组件（比如需要保留一些临时状态），可以让Step3内部监听Step2配置的变化，当配置更新时重新执行初始化逻辑。

如果是函数组件，用useEffect钩子实现：

// Step3组件内部
import { useEffect } from 'react';

function Step3({ step2Config }) {
  useEffect(() => {
    // 这里放置依赖Step2配置的初始化逻辑
    initializeStep3(step2Config);
  }, [step2Config]); // 当step2Config变化时，重新执行初始化

  return (
    <div>
      {/* Step3的内容 */}
    </div>
  );
}

如果是类组件，就用componentDidUpdate钩子：

// Step3类组件
class Step3 extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.step2Config !== this.props.step2Config) {
      this.initializeStep3(this.props.step2Config);
    }
  }

  componentDidMount() {
    this.initializeStep3(this.props.step2Config);
  }

  initializeStep3(config) {
    // 初始化逻辑
  }

  render() {
    return <div>Step3内容</div>;
  }
}

这种方式适合需要保留组件状态，但又要同步依赖数据的场景，不过如果你的初始化逻辑强依赖组件挂载生命周期，前两种方法会更直接。

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