面试题：React函数组件模拟生命周期时如何处理副作用清理

Question

在React函数组件通过`useEffect`模拟生命周期时，有时候需要进行副作用的清理工作，比如取消网络请求。假设你正在使用`fetch`进行数据获取，在组件卸载时要取消这个请求，描述实现思路并给出代码示例。

Answer 1

实现思路

1. 在 useEffect 中发起 fetch 请求。
2. 创建一个 AbortController 实例，用于取消请求。
3. 在 useEffect 的返回函数中调用 AbortController 的 abort 方法，以在组件卸载时取消请求。

代码示例

import React, { useEffect } from 'react';

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

    const fetchData = async () => {
      try {
        const response = await fetch('your-api-url', { signal });
        const data = await response.json();
        console.log(data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('请求已取消');
        } else {
          console.error('请求出错:', error);
        }
      }
    };

    fetchData();

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

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

export default MyComponent;