当前位置：首页 > React

react组件如何销毁

2026-02-26 10:57:59React

React 组件销毁的方式

在 React 中，组件的销毁通常由组件的卸载（unmount）触发。组件的卸载可以通过以下几种方式实现：

条件渲染控制组件卸载

通过条件渲染（如 if 语句或三元表达式）控制组件的显示与隐藏，当条件不满足时，React 会自动卸载组件。

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

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

使用 key 强制重新渲染组件

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

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

  return (
    <div>
      <ChildComponent key={key} />
      <button onClick={() => setKey(key + 1)}>强制卸载并重新挂载</button>
    </div>
  );
}

路由切换导致组件卸载

在使用 React Router 等路由库时，路由切换可能导致当前组件卸载。

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

组件销毁时的清理工作

在组件销毁时，通常需要执行一些清理操作（如取消订阅、清除定时器等）。这些操作可以在 useEffect 的清理函数中完成。

function ChildComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器运行中');
    }, 1000);

    return () => {
      clearInterval(timer);
      console.log('组件卸载，清理定时器');
    };
  }, []);

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

类组件中的销毁逻辑

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

class ChildComponent extends React.Component {
  componentWillUnmount() {
    console.log('组件即将卸载');
  }

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

react组件如何销毁