面试题：React中useEffect替代componentWillUnmount的场景及实现

Question

在类组件中，componentWillUnmount常被用于清理定时器、取消网络请求等操作。请阐述在函数组件中，如何使用useEffect来替代这一生命周期方法，并且详细说明在什么场景下会用到这种替代，给出相关代码示例。

Answer 1

在函数组件中使用 useEffect 替代 componentWillUnmount

在函数组件中，useEffect 第二个参数返回的函数会在组件卸载时执行，这个返回的函数就可以用来替代 componentWillUnmount 的功能。

适用场景

1. 清理定时器：当组件挂载时设置了定时器，在组件卸载时需要清理定时器，防止内存泄漏。
2. 取消网络请求：组件挂载时发起网络请求，若在请求还未完成时组件卸载，需要取消该请求，避免响应回来时组件已不存在导致错误。

代码示例

1. 清理定时器示例

import React, { useEffect } from 'react';

const TimerComponent = () => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器在运行');
    }, 1000);

    return () => {
      clearInterval(timer);
      console.log('定时器已清理');
    };
  }, []);

  return <div>这是一个包含定时器的组件</div>;
};

export default TimerComponent;

2. 取消网络请求示例（以 axios 为例）

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

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

    axios.get('/api/data', { signal })
    .then(response => {
        console.log('请求成功', response.data);
      })
    .catch(error => {
        if (error.name === 'AbortError') {
          console.log('请求已取消');
        } else {
          console.log('请求出错', error);
        }
      });

    return () => {
      controller.abort();
      console.log('请求已取消');
    };
  }, []);

  return <div>这是一个发起网络请求的组件</div>;
};

export default FetchComponent;

在上述代码中，useEffect 返回的函数会在组件卸载时执行，从而实现类似 componentWillUnmount 的清理功能。