如何在具有成分的React组件之间共享钩子

Question

我有一个高阶组件，它向一组相似的组件添加了通用功能。为了便于讨论，我将HOC称为Wrapper，将其称为子级CompA，CompB等。

包装器为connect，并处理与Redux存储的交互以及API交互。它发送的数据归包装的孩子所有，因此我将Wrapper的API /调度功能通过props传递给孩子。现在，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等移到Wrapper类中，并允许CompA和CompB到该类的extend中。 

但是，React documentation strongly recommends composition over inheritance使用高阶组件。链接的文章甚至说他们

never

遇到继承比合成更好的情况。所以我想念什么？有没有办法让我使用HOC将此代码设为DRY？我可以通过道具以某种方式传递useEffect吗？如果我按照自己的直觉，天空会掉下吗：class CompA extends Wrapper ... ??

我有一个高阶组件，它向一组相似的组件添加了通用功能。为了讨论的目的，我将把HOC包装器和它们的子代称为CompA，CompB等。...

Answer 1

创建一个名为useDoStuff的新钩子，该钩子执行useEffect钩子，然后在需要的地方执行useDoStuff(props)。

function useDoStuff(props) {
  const [data, setData] = useState({}):
  useEffect(...)
}

function CompA (props) {
  useDoStuff(props);
  ...
}

function CompB (props) {
  useDoStuff(props);
  ...
}