使用 useEffect 卸载资源

在 React 中，当组件被卸载时，需要正确地清理所有的资源。常见的资源包括事件监听器、定时器、WebSocket 连接、网络请求等等。否则，这些资源将可能产生内存泄漏，导致应用程序变得越来越慢，并最终崩溃。

使用 useEffect hook 可以很容易地通过返回一个函数来清理组件中创建的所有资源。

使用方式

在使用 useEffect 时，只需要返回一个函数即可在组件被卸载时进行清理。这个函数会在卸载时被调用，可以在这里清理所有的资源。

useEffect(() => {
  // 建立 WebSocket 连接
  const ws = new WebSocket('ws://localhost:8080');

  // 添加事件监听器
  ws.addEventListener('message', event => {
    // ...
  });

  // 返回清理函数
  return () => {
    // 关闭 WebSocket 连接
    ws.close();
  };
}, []);

在这个例子中，我们建立了一个 WebSocket 连接，并添加了一个事件监听器。当组件被卸载时，useEffect 返回的函数会在这里关闭 WebSocket 连接。

注意：由于我们没有使用 useEffect 的第二个参数，这个 effect 将在组件的每次更新时都会被执行。如果你只想在组件被挂载时执行 effect，并保证不会被重复执行，可以将第二个参数设置为空数组 []。

示例

以下是一个使用 useEffect 清理定时器的示例：

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

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);

    return () => clearInterval(id);
  }, []);

  return <div>{count}</div>;
}

在这个示例中，我们使用 useEffect 建立了一个定时器，并在组件被卸载时清理了这个定时器。

总结

使用 useEffect hook，我们可以很容易地清理 React 组件中的所有资源。只需要返回一个函数即可在组件被卸载时进行清理。这个函数会在卸载时被调用，可以在这里清理所有的资源。