如何使用组合在 React 组件之间共享钩子

Question

我有一个高阶组件，可以为一组相似的组件添加通用功能。出于讨论的目的，我将 HOC 称为 Wrapper 和 children CompA、CompB 等

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

这没问题，但是决定何时调用doStuff函数的事件是CompA、CompB等本地状态的变化。所以我copy/pasting一样useEffects 在 children...

之间

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 等移动到包装器 class 中，并允许 CompA 和 CompB 到 extend 即 class。

然而，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);
  ...
}

如何使用组合在 React 组件之间共享钩子

How to share hooks between React components with composition

javascript

inheritance

composition

reactjs