掌握诀窍，React.js组件卸载巧妙取消异步请求

2023-11-04 13:31:21

在 React 中正确取消异步请求

在 React 应用程序中，异步请求是获取或发送数据的重要手段，它们能促进应用程序与服务器通信。不过，当组件卸载时，这些异步请求可能会持续执行，进而导致内存泄漏和性能问题。因此，掌握在组件卸载时正确取消异步请求至关重要。

利用 fetch 请求的 abort 方法

fetch API 提供了一个 abort 方法，可以在请求进行期间取消请求。这种方法简单易用，只需在组件卸载时调用 abort 方法即可。

// 组件卸载时取消 fetch 请求
componentDidMount() {
  this.fetchRequest = fetch('https://example.com/api');
}

componentWillUnmount() {
  if (this.fetchRequest) {
    this.fetchRequest.abort();
  }
}

使用自定义钩子

如果一个组件需要处理多个异步请求，或希望在组件卸载时取消所有正在进行的请求，那么使用自定义钩子是一种不错的方法。

// 自定义钩子：取消异步请求
import { useEffect, useRef } from 'react';

const useAbortController = () => {
  const controller = useRef(new AbortController());

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

  return controller;
};

// 组件中使用自定义钩子
const MyComponent = () => {
  const controller = useAbortController();

  // 使用 AbortController 来取消 fetch 请求
  useEffect(() => {
    fetch('https://example.com/api', {
      signal: controller.current.signal,
    });
  }, []);

  return <div>...</div>;
};