面试题：Next.js 中如何在页面路由跳转时，处理 React 组件生命周期函数以保证数据的正确加载与清理？

Question

假设在 Next.js 项目中有两个页面 PageA 和 PageB，从 PageA 跳转到 PageB 时，PageA 组件的 `componentWillUnmount` 生命周期函数没有按预期执行数据清理操作，导致内存泄漏。请分析可能的原因，并给出至少两种解决该问题的方法。

Answer 1

可能的原因

1. 路由跳转方式：如果使用的是非标准的 Next.js 路由跳转方式（如 window.location.href 等），可能不会触发 Next.js 组件正常的生命周期函数，包括 componentWillUnmount。
2. 异步操作未清理：在 PageA 组件中有异步操作（如定时器 setTimeout、setInterval，或者未取消的 fetch 请求等），且在 componentWillUnmount 中没有对这些异步操作进行清理，即使 componentWillUnmount 执行了，这些异步操作依然可能导致内存泄漏。
3. 事件绑定未解绑：在 PageA 组件中给 DOM 元素或其他对象绑定了事件监听器，但在 componentWillUnmount 中没有解绑这些事件监听器，使得 DOM 元素或对象仍然持有对组件的引用，导致组件无法被正确销毁，进而引发内存泄漏。

解决方法

1. 使用标准路由跳转：确保使用 Next.js 提供的 next/router 进行路由跳转，例如：

import Link from 'next/link';

function PageA() {
  return (
    <Link href="/pageB">
      <a>跳转到 PageB</a>
    </Link>
  );
}

这样可以保证在路由切换时，组件的生命周期函数能按预期执行。 2. 清理异步操作： - 定时器：如果在 PageA 组件中有 setTimeout 或 setInterval，在 componentWillUnmount 中清除它们。

import React, { useEffect } from'react';

function PageA() {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log('定时器执行');
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return <div>PageA</div>;
}

- **`fetch` 请求**：对于 `fetch` 请求，可以使用 `AbortController` 来取消未完成的请求。

import React, { useEffect } from'react';

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

    fetch('/api/data', { signal })
    .then(response => response.json())
    .then(data => console.log(data));

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

  return <div>PageA</div>;
}

3. 解绑事件监听器：如果在 PageA 组件中绑定了事件监听器，在 componentWillUnmount 中解绑。

import React, { useEffect } from'react';

function PageA() {
  useEffect(() => {
    const handleClick = () => {
      console.log('点击事件');
    };
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return <div>PageA</div>;
}