当前位置：首页 > React

react如何注销

2026-01-13 11:33:56React

React 组件的注销方法

在 React 中，组件的注销通常指的是在组件卸载时执行清理操作，例如取消订阅、清除定时器或释放资源。以下是几种常见的方法：

使用 useEffect 钩子的清理函数

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 组件挂载时的操作
    const timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);

    // 返回清理函数，组件卸载时执行
    return () => {
      clearInterval(timer);
      console.log('Component unmounted');
    };
  }, []);

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

类组件中的 componentWillUnmount

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Timer running');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
    console.log('Component unmounted');
  }

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

取消事件监听

import React, { useEffect } from 'react';

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

    window.addEventListener('click', handleClick);

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

取消网络请求

import React, { useEffect } from 'react';

function MyComponent() {
  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();
    };
  }, []);
}