当前位置：首页 > React

react如何销毁

2026-03-30 14:56:10React

销毁 React 组件

在 React 中，销毁组件通常涉及清理副作用、取消订阅和释放资源。可以通过 componentWillUnmount 生命周期方法或 useEffect 钩子的清理函数实现。

类组件中的销毁

在类组件中，使用 componentWillUnmount 生命周期方法执行清理操作。该方法在组件卸载前调用。

react如何销毁

class ExampleComponent extends React.Component {
  componentDidMount() {
    // 初始化操作，如订阅事件
    this.timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);
  }

  componentWillUnmount() {
    // 清理操作，如取消订阅
    clearInterval(this.timer);
  }

  render() {
    return <div>Example Component</div>;
  }
}

函数组件中的销毁

在函数组件中，使用 useEffect 钩子的清理函数执行销毁操作。清理函数在组件卸载或依赖项变化时运行。

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);

    // 返回清理函数
    return () => {
      clearInterval(timer);
    };
  }, []); // 空依赖数组表示仅在组件挂载和卸载时运行

  return <div>Example Component</div>;
}

手动销毁组件

React 组件通常由 React 的虚拟 DOM 管理，但可以通过条件渲染或 ReactDOM.unmountComponentAtNode 手动销毁。

react如何销毁

import ReactDOM from 'react-dom';

// 条件渲染销毁
function ParentComponent() {
  const [showChild, setShowChild] = React.useState(true);

  return (
    <div>
      <button onClick={() => setShowChild(false)}>Destroy Child</button>
      {showChild && <ChildComponent />}
    </div>
  );
}

// 使用 unmountComponentAtNode
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

// 手动卸载组件
ReactDOM.unmountComponentAtNode(rootElement);

清理异步操作

在销毁组件时，确保取消未完成的异步操作以避免内存泄漏。

useEffect(() => {
  let isMounted = true;

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      if (isMounted) {
        setData(data);
      }
    });

  return () => {
    isMounted = false;
  };
}, []);

事件监听器的清理

在组件销毁时移除事件监听器以防止内存泄漏。

useEffect(() => {
  const handleClick = () => {
    console.log('Clicked');
  };

  window.addEventListener('click', handleClick);

  return () => {
    window.removeEventListener('click', handleClick);
  };
}, []);

通过以上方法，可以确保 React 组件在销毁时正确清理资源，避免内存泄漏和其他问题。

标签: react