useEffect依赖同一个变量，如何收集回调

如果多个 useEffect 需要依赖同一个变量，并且你希望收集这些回调，可以将它们封装在一个函数中，并在该函数内部使用变量。然后，将该函数作为一个单独的 useEffect 的回调函数来使用。

下面是一个示例代码：

import React, { useEffect } from 'react';

const MyComponent = () => {
  const myVariable = 'some value';

  const handleCallback1 = () => {
    // 回调逻辑1
    console.log('Callback 1');
    console.log(myVariable);
  };

  const handleCallback2 = () => {
    // 回调逻辑2
    console.log('Callback 2');
    console.log(myVariable);
  };

  useEffect(() => {
    // 使用第一个回调
    handleCallback1();

    // 返回清理函数
    return () => {
      // 清理逻辑
      console.log('Cleanup');
    };
  }, [handleCallback1]);

  useEffect(() => {
    // 使用第二个回调
    handleCallback2();

    // 返回清理函数
    return () => {
      // 清理逻辑
      console.log('Cleanup');
    };
  }, [handleCallback2]);

  return <div>My Component</div>;
};

在这个例子中，我们定义了两个回调函数 `handleCallback1` 和 `handleCallback2`，它们都依赖于变量 `myVariable`。然后，我们分别将这两个回调函数作为不同的 useEffect 的回调函数，并在依赖项数组中传入对应的回调函数。这样，每个 useEffect 都能独立地收集回调函数，并在依赖项变化时执行相应的回调函数。