我来自一个角度分明的世界,在那里我可以将逻辑提取到服务/工厂,并在控制器中使用它们
我试图了解如何在React应用程序中实现同样的效果
假设我有一个验证用户密码输入的组件(它的强度)。它的逻辑相当复杂,因此我不想将其写在组件中
我应该在哪里写这个逻辑?在商店里,如果我使用flux?还是有更好的选择
当您意识到Angular服务只是一个提供一组上下文无关方法的对象时,问题就变得非常简单了。这只是角度的DI机制,使它看起来更复杂。DI很有用,因为它负责为您创建和维护实例,但您并不真正需要它
考虑一个名为axios的流行AJAX库(您可能听说过):
从“axios”导入axios;
轴突柱(…);
它不是一种服务吗?它提供了一组负责某些特定逻辑的方法,并且独立于主代码
您的示例案例是关于创建一组独立的方法来验证您的输入(例如,检查密码强度)。有些人建议将这些方法放在组件中,这对我来说显然是一种反模式。如果验证涉及进行和处理XHR后端调用或进行复杂计算,该怎么办?你会将这种逻辑与鼠标点击处理程序和其他特定于用户界面的东西混合在一起吗?胡说容器/HOC方法也是如此。包装组件只是为了添加一个方法,该方法将检查值中是否有数字?来吧
我将创建一个名为say’ValidationService.js’的新文件,并按如下方式组织它:
常量验证服务={
firstValidationMethod:函数(值){
//检查值
},
secondValidationMethod:函数(值){
//检查值
}
};
导出默认验证服务;
然后在组件中:
从“/services/ValidationService.js”导入ValidationService;
...
//组件内部
yourInputChangeHandler(事件){
如果(!ValidationService.firstValidationMethod(event.target.value){
//显示验证警告
返回false;
}
//进行
}
可以在任何地方使用此服务。如果验证规则发生更改,则只需关注ValidationService.js文件
您可能需要一个更复杂的服务,这取决于其他服务。在这种情况下,您的服务文件可以返回一个类构造函数而不是静态对象,这样您就可以在组件中自己创建一个对象实例。您还可以考虑实现一个简单的单件,以确保总是只有一个实例O。f在整个应用程序中使用的服务对象