当前位置：首页 > React

react如何注销

2026-03-30 17:23:13React

React 组件注销方法

在 React 中，组件的注销通常涉及清理副作用、取消订阅或释放资源。以下是几种常见的注销场景及实现方式：

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

在类组件中，可以通过 componentWillUnmount 生命周期方法执行注销逻辑。该方法会在组件卸载前调用。

class ExampleComponent extends React.Component {
  componentDidMount() {
    // 初始化操作，如订阅事件、设置定时器等
    this.timerID = setInterval(() => {
      console.log('Timer tick');
    }, 1000);
  }

  componentWillUnmount() {
    // 清理操作，如取消订阅、清除定时器
    clearInterval(this.timerID);
  }

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

函数组件中使用 useEffect

react如何注销

在函数组件中，可以通过 useEffect 钩子的清理函数来实现注销逻辑。useEffect 返回的函数会在组件卸载时执行。

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 初始化操作
    const timerID = setInterval(() => {
      console.log('Timer tick');
    }, 1000);

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

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

事件监听器的清理

react如何注销

如果组件中添加了事件监听器，需要在注销时移除它们以避免内存泄漏。

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

  document.addEventListener('click', handleClick);

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

取消网络请求

对于未完成的网络请求，可以使用 AbortController 在组件注销时取消请求。

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('Request aborted');
      }
    });

  return () => {
    controller.abort();
  };
}, []);