面试题：复杂 React 应用中深层次的内存泄漏排查与解决

排查内存泄漏位置的流程和方法

使用浏览器开发者工具
- Performance 面板：在 Chrome 浏览器中，打开开发者工具的 Performance 面板。录制一段时间的应用操作，如多次切换页面（利用 React Router）、触发 Redux 相关的状态改变等操作。重点关注内存图表，如果在操作过程中，内存持续增长且没有下降趋势，很可能存在内存泄漏。
- Memory 面板：
  - 堆快照对比：进行多次堆快照（Heap Snapshot）。例如，在应用初始加载后进行一次快照，执行一些可能导致内存泄漏的操作（如重复打开关闭某个组件、频繁发起异步请求）后再进行一次快照。通过对比两次快照，查看对象数量的变化，特别是那些本应被销毁但仍然存在的对象。
  - 查找 detached DOM 节点：如果存在 detached DOM 节点，意味着 DOM 元素在 JavaScript 中仍有引用，但已经不在 DOM 树中，这可能导致内存泄漏。在 Memory 面板中，使用“Find Leaked DOM nodes”等功能来定位这些节点。
代码审查
- 组件层面：
  - 生命周期函数检查：检查 React 组件的生命周期函数，特别是 componentWillUnmount。确保在组件卸载时，取消所有的异步操作（如定时器、未完成的 AJAX 请求等）。例如，如果在组件中使用了 setInterval，在 componentWillUnmount 中应该调用 clearInterval。
  - 事件绑定与解绑：确认所有的事件绑定（如 addEventListener）在组件卸载时都有对应的解绑操作（removeEventListener）。在 React 中，事件处理函数通常通过 JSX 属性绑定，但对于一些原生 DOM 事件绑定，需要手动处理解绑。
- Redux 层面：
  - 订阅与取消订阅：如果 Redux store 使用了订阅机制（如 store.subscribe），确保在不需要时（例如相关组件卸载时）取消订阅，防止内存泄漏。
  - 中间件检查：检查 Redux 中间件，特别是那些处理异步操作（如 redux - thunk、redux - saga）的中间件。确保异步操作在合适的时候被正确终止，不会因为残留的异步任务导致内存泄漏。
- React Router 层面：
  - 路由切换清理：当路由切换时，确保旧路由组件中的资源（如定时器、事件监听器等）被正确清理。例如，在路由组件的 componentWillUnmount 中进行必要的清理操作。
日志输出与调试
- 在可能出现内存泄漏的关键位置（如异步操作开始和结束处、组件生命周期函数中）添加详细的日志输出。通过日志观察异步操作是否按预期完成，组件是否按预期挂载和卸载。例如，在发起异步请求的函数中记录请求开始和结束的时间，以及请求是否成功完成。

针对不同场景的解决方案

异步操作场景
- AJAX 请求：使用 AbortController（现代浏览器支持）来取消未完成的 AJAX 请求。例如，在 React 组件中发起 fetch 请求时：

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

const MyComponent = () => {
    const [data, setData] = useState(null);
    const controller = new AbortController();
    const { signal } = controller;

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('/api/data', { signal });
                const result = await response.json();
                setData(result);
            } catch (error) {
                if (error.name === 'AbortError') {
                    console.log('Request aborted');
                } else {
                    console.error('Error fetching data:', error);
                }
            }
        };
        fetchData();
        return () => {
            controller.abort();
        };
    }, []);

    return <div>{data? <p>{JSON.stringify(data)}</p> : <p>Loading...</p>}</div>;
};

export default MyComponent;

- **定时器**：在 `componentWillUnmount` 中清除定时器。例如：

import React, { useEffect } from'react';

const MyComponent = () => {
    useEffect(() => {
        const intervalId = setInterval(() => {
            console.log('Interval running');
        }, 1000);
        return () => {
            clearInterval(intervalId);
        };
    }, []);

    return <div>Component with interval</div>;
};

export default MyComponent;

第三方库使用场景
- 确认库的最佳实践：查阅第三方库的官方文档，了解其推荐的使用方式和清理资源的方法。例如，一些图表库在组件卸载时可能需要调用特定的销毁函数来释放资源。
- 封装与管理：对第三方库的使用进行封装，在封装层处理资源的初始化和清理。这样可以在一个地方集中管理资源，避免在多个组件中重复处理。例如，封装一个使用第三方地图库的组件，在组件的 componentWillUnmount 中调用地图库的销毁方法。

星途面试题库

面试题：复杂 React 应用中深层次的内存泄漏排查与解决

知识考点

面试题答案

排查内存泄漏位置的流程和方法

针对不同场景的解决方案