javascript - 如何通过组合在 React 组件之间共享 hooks

Question

我有一个更高阶的组件，它为一组类似的组件添加了通用功能。出于讨论的目的，我将调用 HOC Wrapper 和子级 CompA、CompB 等。

Wrapper 已connected，并处理与 Redux 存储的交互以及 API 交互。它发送的数据由包装的子级拥有，因此我通过 props 将 API/调度函数从 Wrapper 传递给子级。现在，CompA、CompB 等都有一个在 Wrapper 中定义一次的 props.doStuff 函数。

这没问题，但是决定何时调用 doStuff 函数的事件是 CompA、CompB 等中本地状态的更改。因此，我复制/粘贴相同的 children 之间使用Effect...

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扩展该类。

但是，React documentation strongly recommends composition over inheritance使用高阶组件。链接的文章甚至说他们从未遇到过继承比组合更好的情况。

那我错过了什么？有没有办法让我使用 HOC 使这段代码干燥？我可以通过 props 传递 useEffect 吗？如果我只是跟随我的直觉，天会塌下来吗:class CompA extends Wrapper...??

Answer 1

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

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

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

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