React的useEffect Hook中清理函数

在React的useEffect Hook中，如果你返回一个函数，那么这个函数会在组件卸载或useEffect再次执行（由于依赖项数组中的值改变）之前被调用，作为清理逻辑。

这个返回的函数通常被称为“清理函数”（cleanup function）或“effect的清除”（effect cleanup）。它通常用于执行以下操作：

• 取消网络请求
• 清除定时器
• 移除事件监听器
• 断开数据库连接
• 清理任何在useEffect中创建的副作用

 这是一个简单的示例，展示了如何在useEffect中使用清理函数：

import React, { useState, useEffect } from 'react';  
  
function ExampleComponent() {  
  const [count, setCount] = useState(0);  
  
  useEffect(() => {  
    // 模拟一个副作用，比如设置一个定时器  
    const timerId = setInterval(() => {  
      setCount((prevCount) => prevCount + 1);  
    }, 1000);  
  
    // 返回一个清理函数，用于清除定时器  
    return () => {  
      clearInterval(timerId);  
    };  
  }, []); // 依赖项数组为空，表示这个effect只会在组件挂载和卸载时执行  
  
  return (  
    <div>  
      <p>Count: {count}</p>  
    </div>  
  );  
}  
  
export default ExampleComponent;

在React的useEffect Hook中，你通常只返回一个清理函数，这个函数会在组件卸载或useEffect的依赖项发生变化之前执行。然而，在某些情况下，你可能需要在组件卸载之前执行多个清理任务

例如：

useEffect(() => {  
  // 假设我们有两个需要清理的资源  
  const resource1 = createResource1();  
  const resource2 = createResource2();  
  
  // 当组件卸载或依赖项变化时，我们想要清理这两个资源  
  return () => {  
    // 清理第一个资源  
    cleanupResource1(resource1);  
    // 清理第二个资源  
    cleanupResource2(resource2);  
  };  
}, [/* 依赖项数组 */]);

在上面的例子中，我们创建了两个资源（resource1和resource2），并在返回的清理函数中分别清理了它们。

另外，值得注意的是，如果你的组件使用了多个useEffect Hook，并且每个Hook都需要自己的清理逻辑，那么你应该在每个useEffect中分别定义并返回自己的清理函数。

useEffect(() => {  
  // 第一个effect的逻辑  
  const resource1 = createResource1();  
  return () => {  
    // 清理第一个effect的资源  
    cleanupResource1(resource1);  
  };  
}, [/* 第一个effect的依赖项数组 */]);  
  
useEffect(() => {  
  // 第二个effect的逻辑  
  const resource2 = createResource2();  
  return () => {  
    // 清理第二个effect的资源  
    cleanupResource2(resource2);  
  };  
}, [/* 第二个effect的依赖项数组 */]);

在这个例子中，我们有两个独立的useEffect Hook，每个都有自己的清理逻辑。这是组织和管理副作用的一个好方法，特别是当它们之间没有直接关联时。