React内存泄漏的常见原因及避免策略

class MyComponent extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => {
      // 执行定时任务
    }, 1000);
    window.addEventListener('resize', this.handleResize);
  }
  
  componentWillUnmount() {
    clearInterval(this.timerID);
    window.removeEventListener('resize', this.handleResize);
  }
  
  render() {
    return <div>内容</div>;
  }
}

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      // 执行定时任务
    }, 1000);
    const handleResize = () => {
      console.log('resize');
    };
    window.addEventListener('resize', handleResize);

    // 清理函数：组件卸载时自动调用
    return () => {
      clearInterval(timer);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

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

import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

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

    fetch('https://api.example.com/data', { signal })
      .then(response => response.json())
      .then(result => setData(result))
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      });

    return () => {
      controller.abort(); // 取消请求
    };
  }, []);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>加载中...</div>;
  return <div>数据加载完成</div>;
}

useEffect(() => {
  const subscription = someObservable.subscribe(data => {
    // 处理数据
  });
  return () => {
    subscription.unsubscribe(); // 取消订阅
  };
}, []);