面试题：React组件卸载时处理订阅资源的清理

Question

假设在React组件中订阅了一个外部数据源（如Websocket连接、自定义事件等），当组件卸载时，需要取消这些订阅以避免潜在的内存泄漏和数据不一致问题。请阐述如何在组件卸载时正确清理这些订阅资源，并结合实际场景说明不同订阅方式（如第三方库提供的订阅方法等）下的清理步骤及注意事项，给出代码示例。

Answer 1

1. 使用useEffect和useState进行订阅和取消订阅

在React函数组件中，useEffect钩子函数可以用于处理副作用操作，包括订阅外部数据源。当组件卸载时，useEffect返回的清理函数会被调用，用于取消订阅。

假设我们使用一个简单的自定义事件来模拟外部数据源订阅，示例代码如下：

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

// 模拟外部数据源（自定义事件）
const eventEmitter = {
  subscribe(callback) {
    document.addEventListener('customEvent', callback);
    return () => {
      document.removeEventListener('customEvent', callback);
    };
  }
};

const MyComponent = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    const handleEvent = (event) => {
      setData(event.detail);
    };
    const unsubscribe = eventEmitter.subscribe(handleEvent);
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <div>
      <p>Data from subscription: {data}</p>
    </div>
  );
};

export default MyComponent;

2. 使用第三方库（如ws库用于WebSocket连接）的订阅和取消订阅

假设我们使用ws库来建立WebSocket连接，示例代码如下：

import React, { useEffect } from'react';
import WebSocket from 'ws';

const MyComponent = () => {
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080');
    socket.on('message', (message) => {
      console.log('Received:', message);
    });
    return () => {
      socket.close();
    };
  }, []);

  return (
    <div>
      <p>WebSocket connection component</p>
    </div>
  );
};

export default MyComponent;

注意事项

1. 确保清理函数的正确返回：在useEffect中，返回清理函数是关键步骤，它会在组件卸载时被调用。如果没有正确返回清理函数，可能会导致内存泄漏。
2. 避免在清理函数中产生新的副作用：清理函数应该只专注于取消订阅操作，避免在其中触发新的异步操作或产生其他副作用，以免引发难以调试的问题。
3. 考虑依赖项数组：useEffect的第二个参数是依赖项数组。如果依赖项数组为空[]，则useEffect只在组件挂载和卸载时执行。如果依赖项数组中有值，useEffect会在依赖项变化时重新执行，并在重新执行前调用之前的清理函数。确保依赖项数组的设置正确，以避免不必要的重复订阅和取消订阅操作。

通过上述方法，我们可以在React组件卸载时正确清理订阅资源，避免内存泄漏和数据不一致问题。