【翻译】Mobx React -- 最佳实践

原文: Mobx React — Best Practices

在本文中,我将展示React与mobx结合使用的常见最佳实践。我将按规则介绍它们。因此,每当遇到特定问题时,都应遵循这些规则来尝试解决。

本文要求你对mobx中的store有基本的了解。如果没有,请先阅读此内容

用store表示ui状态

切记,store表示你的的应用程序的ui状态。这意味着,当你将store的状态保存到文件中时,关闭程序并以加载的状态重新启动它,你将拥有相同的程序,并且会看到与关闭程序之前相同的内容。store并不意味着是“本地数据库”。它们还保存有关哪些按钮可见,已禁用,输入字段的当前文本等信息。

将接口调用和store分离

不要在store内调用rest接口,这会使它们难以测试。而是将这些接口调用放入额外的类中,然后使用store的构造函数将这些实例传递给每个store。编写测试时,您可以轻松地伪造这些api调用,并将伪造的api实例传递给每个store。

将业务逻辑保存在store中

永远不要在组件中编写业务逻辑。当你在组件中编写业务逻辑时,你没有机会重用它,你的业务逻辑会散布在许多组件中,这使得重构或重用代码变得很困难。使用store中的方法编写业务逻辑,然后从组件中调用这些方法。

不要创建全局Store实例

永远不要创建全局store实例。你将不能为组件编写任何合理且可靠的测试。而是使用Provider将你的store注入到组件prop中。然后,在测试中,你可以轻松模拟这些store。

只允许store更改其属性

切勿直接在组件中更改store的属性。只允许store更改其自己的属性。始终从store中调用一个方法,该方法会更改store的属性。否则,你的应用程序状态(store=application state)会随处更新,并且你正在慢慢失去控制权。这使得调试非常困难。

始终使用@observer装饰每个组件

使用@observer装饰每个组件可以使每个组件在store属性更改时进行更新。否则,需要重新渲染以@observer装饰的父组件,以更新其子组件。因此,需要重新渲染的组件更少。

使用 @computed

假设你要在用户没有管理员角色并且应用程序不在“管理员模式”时禁用按钮。在一个store中,像isAdmin这样的单个属性还不够。你的store中将需要一个计算属性。

Provider和inject

你可能不需要React Router

你可能不需要react router。正如我之前说过的,你希望store表示你的应用程序状态。当你让React Router处理部分应用程序状态时,请勿让你的store表示应用程序状态。因此,将当前显示的视图保留在其中一个store的一个属性中。然后,你只有一个用来渲染属性内容的组件。

如何解耦状态和组件–你不需要componentWillMount

尝试偏向受控组件而不是不受控制组件

始终尝试构建受控组件。这会使得测试组件和组件的整体复杂性易于处理。


希望这些简单的技巧对你有所帮助。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注