针对组件可以使用的服务数量做出反应建议

Question

我们有一个像

EditProductForm.tsx

这样的组件，但是要编辑产品，我们需要通过 id 加载该产品，并处理验证和提交过程。为了编写这些逻辑，我们通常创建

services

，即

hooks

:

// useLoadProductService.ts
export default function useLoadProductService({productId}):{ productForm } {

  function loadTheProduct() : productForm {
    // load the product
  }
  return {
    productForm: loadTheProduct()
  }
}

// useHandleProductEditService.ts
export default function useHandleProductEditService({form}):{  } {

  function submitClick() {
    // store the form
  }
  
  return {
    submitClick: submitClick,
  }
}


// EditProductForm.tsx
export default function EditProductForm({productId}): ReactNode {
  const {productForm} = useLoadProductService({productId});
  const service = useHandleProductEditService({form: productForm});

  return (
    <form>
      <input ... />
    </form>
  );
}

在我们的组件中，我们使用两个服务。主题是：是否不建议一个组件同时使用多个服务？编写这样的组件时会出现什么问题？只使用一项服务有什么好处？

建议使用其中之一。要实现这一点，有两种不同的方法：

• useHandleProductEditService

  包含现在在

  useLoadProductService

  中分离的所有代码，这（对我来说）根本没有优势
• 里面的

  useHandleProductEditService

  使用了

  useLoadProductService

  ，它返回的，它也返回。在这种情况下，

  useHandleProductEditService

  拥有它需要的所有属性，以及

  useHandleProductEditService

  的属性，并将它们传递给它。这种情况下的超级服务对我来说似乎也没有太大优势。

只使用一项服务，并通过创建这个庞大而复杂的服务来面对所有的问题和挑战，而不是编写和使用较小的服务，这是否有一些优势？为什么推荐？

Answer 1

这是一个基于意见的问题，没有绝对正确的答案。在一个 React 组件中使用多个钩子没有任何限制。服务、钩子、组件等...它们只是 JS 函数，所以函数的一般设计原则是：

• 单一职责原则

• 关注点分离

• 不要重复自己

重复比错误的抽象要便宜得多
单层抽象原则
遵循上述原则的目标是提高代码的可读性、可维护性、可重用性和可扩展性。