当前位置：首页 > React

react函数组件如何销毁组件

2026-01-25 20:44:26React

在 React 函数组件中销毁组件

React 函数组件的销毁通常由 React 的声明式渲染机制自动处理。当组件从 DOM 中移除时，React 会自动清理其资源。以下是关键点：

触发组件销毁的条件

父组件不再渲染该子组件（例如条件渲染中条件不满足）。
使用 ReactDOM.unmountComponentAtNode() 强制卸载某个节点下的组件。
路由切换时，旧路由对应的组件会被卸载。

手动清理副作用

虽然不能直接"销毁"组件，但可以通过以下方式确保组件卸载时资源被正确释放：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 组件挂载时执行的代码

    return () => {
      // 这里返回的清理函数会在组件卸载时执行
      console.log('组件即将卸载，清理工作在这里进行');
      // 清除定时器、取消订阅等
    };
  }, []);

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

强制卸载组件的方法

在父组件中可以通过条件渲染控制子组件的存在：

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

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

使用 key 强制重新创建组件

通过改变组件的 key 属性可以强制 React 销毁旧组件实例并创建新实例：

react函数组件如何销毁组件

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

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