如何通过组合在 React 组件之间共享钩子

Question

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

Wrapper 是 connected，它处理与 Redux 存储的交互以及 API 交互。它发送的数据归被包装的孩子所有，所以我通过道具将 API/调度函数从 Wrapper 传递给孩子。现在 CompA、CompB 等都有一个 props.doStuff 函数，该函数在 Wrapper 中定义了一次。

这没关系，但是决定何时调用doStuff 函数的事件是 CompA、CompB 等中本地状态的变化。所以我在孩子之间复制/粘贴相同的 useEffects。 ..

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 使这段代码干燥？我可以通过道具以某种方式传递useEffects 吗？如果我只是跟随我的直觉，天会不会塌下来：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);
  ...
}