reactjs - 在 React 应用程序中拥有服务

Question

我来自有角度的世界，在那里我可以将逻辑提取到服务/工厂并在我的 Controller 中使用它们。

我试图了解如何在 React 应用程序中实现相同的目标。

假设我有一个组件可以验证用户的密码输入(它的强度)。它的逻辑非常复杂，因此我不想将它编写在它自己的组件中。

我应该在哪里写这个逻辑？如果我使用助焊剂，在商店里可以吗？或者有更好的选择吗？

Answer 1

当您意识到 Angular 服务只是一个提供一组与上下文无关的方法的对象时，问题就变得非常简单。只是 Angular 的 DI 机制让它看起来更复杂。 DI 很有用，因为它负责为您创建和维护实例，但您并不真正需要它。

考虑一个名为 axios 的流行 AJAX 库(您可能听说过):

import axios from "axios";
axios.post(...);

它不就是一种服务吗？它提供了一组负责一些具体逻辑的方法，并且独立于主代码。

您的示例案例是关于创建一组独立的方法来验证您的输入(例如检查密码强度)。有些人建议将这些方法放在组件中，这对我来说显然是一种反模式。如果验证涉及进行和处理 XHR 后端调用或进行复杂的计算怎么办？您是否会将此逻辑与鼠标单击处理程序和其他 UI 特定内容混合在一起？废话。与容器/HOC 方法相同。包装您的组件只是为了添加一个方法来检查该值中是否有数字？来吧。

我只需创建一个名为“ValidationService.js”的新文件并按如下方式组织它:

const ValidationService = {
    firstValidationMethod: function(value) {
        //inspect the value
    },

    secondValidationMethod: function(value) {
        //inspect the value
    }
};

export default ValidationService;

然后在你的组件中:

import ValidationService from "./services/ValidationService.js";

...

//inside the component
yourInputChangeHandler(event) {

    if(!ValidationService.firstValidationMethod(event.target.value) {
        //show a validation warning
        return false;
    }
    //proceed
}

从任何您想要的地方使用此服务。如果验证规则发生更改，您只需关注 ValidationService.js 文件。

您可能需要更复杂的服务，该服务取决于其他服务。在这种情况下，您的服务文件可能会返回类构造函数而不是静态对象，因此您可以在组件中自己创建该对象的实例。您还可以考虑实现一个简单的单例，以确保整个应用程序中始终只有一个服务对象实例在使用。