当前位置：首页 > React

react如何销毁组件

2026-02-26 15:25:55React

React 销毁组件的方法

在 React 中，组件的销毁通常由 React 自身的生命周期管理。组件的销毁行为可以通过以下几种方式触发：

条件渲染导致组件卸载

通过条件判断控制组件的渲染，当条件不满足时，React 会自动卸载组件：

function ParentComponent() {
  const [showChild, setShowChild] = useState(true);

  return (
    <div>
      <button onClick={() => setShowChild(false)}>销毁子组件</button>
      {showChild && <ChildComponent />}
    </div>
  );
}

使用 key 强制重新挂载组件

通过改变组件的 key 属性，React 会认为这是一个新组件，从而卸载旧组件并挂载新组件：

function ParentComponent() {
  const [key, setKey] = useState(0);

  return (
    <div>
      <button onClick={() => setKey(prev => prev + 1)}>销毁并重新创建组件</button>
      <ChildComponent key={key} />
    </div>
  );
}

在类组件中使用生命周期方法

对于类组件，可以在 componentWillUnmount 生命周期方法中执行清理操作：

class ChildComponent extends React.Component {
  componentWillUnmount() {
    // 执行清理操作，如取消订阅、清除定时器等
    console.log('组件即将被销毁');
  }

  render() {
    return <div>子组件内容</div>;
  }
}

在函数组件中使用 useEffect 清理副作用

函数组件可以通过 useEffect 的清理函数来处理组件销毁时的逻辑：

function ChildComponent() {
  useEffect(() => {
    return () => {
      // 清理副作用
      console.log('组件被销毁');
    };
  }, []);

  return <div>子组件内容</div>;
}