问如何在反应元件之间共享钩子

EN

我有一个高阶组件，它将通用功能添加到一组类似的组件中。为了便于讨论，我将把这个特殊的Wrapper和子CompA、CompB等命名为。

包装器是connect编辑的，并处理与Redux的交互以及API交互。它发送的数据属于包装的子程序，因此我通过支持将API/分派函数从包装器传递到子包中。现在，CompA、CompB等都有一个props.doStuff函数，该函数在包装器中只定义一次。

这是可以的，但是决定何时调用doStuff函数的事件是CompA、CompB等中本地状态的变化。因此，我要在两个子程序之间复制/粘贴相同的useEffect……

function CompA(props) {
  const [data, setData] = useState({});
  useEffect( () => {
    if (props.doStuffNow === true) {
      props.doStuff(data);
    }
  }, [props.something]);
  return <div>CompA</div>
}

function CompB(props) {
  const [differentData, setDifferentData] = useState({});
  useEffect( () => {
    if (props.doStuffNow === true) {
      props.doStuff(differentData);
    }
  }, [props.something]);
  return <div>CompB</div>
}

这不是D.R.Y.，我真的很想把useEffect等移到包装类中，并允许CompA和CompB对该类进行extend。

然而，反应documentation recommends composition over inheritance使用高阶组件。链接的文章甚至说他们从来没有遇到过继承比组合更好的情况。

那我错过了什么？有什么方法可以让我的代码变得干净利落吗？我可以通过道具传递useEffect吗？如果我只凭直觉：class CompA extends Wrapper.？