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使用高阶组件。链接的文章甚至说他们从未遇到过继承比合成更好的情况。

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

Answer 1

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

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

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

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

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

1 个答案: