ReactJS应用程序的MVVM架构模式

Question

我是一个半高级react和JavaScript开发商,我做了几个通用react的应用程序.

今天我们的CTO告诉我:您是否为您的应用程序使用软件架构模式？

我没有回答,他指的是用于他们应用程序的Android团队MVVM.

我正在寻找贪婪但没有找到针对这种情况的趋势方法或示例.我用Redux,Redux-Saga,React-Context等.

我不知道如何向我们的CTO解释或他的答案是什么？

因此:是否一个react应用程序确实需要一个软件架构模式？

Answer 1

React本身并不特别关注软件架构.它是一个库,它促进了可重用的组件范例以及管理状态和数据共享(道具)之类的指导.在某些时候,Facebook描述了这一点,the V in MVC但后来从那个营销转移到更抽象地称它A JavaScript library for building user interfaces.

当然,与React应用程序相关联的典型工具在一起使用时确实适用于某种体系结构.

几种可能的思考方式:

简单的React应用程序可能只是"VVM"或"VC"

MVC可能是发展中国家中两者中较为知名的.控制器(C)和视图模型(VM)之间的关键概念差异可以归结为:控制器可以具有许多不同的职责,例如监听事件并将它们路由到正确的方向.它是促进整个应用程序功能的粘合剂.甲视图模型,另一方面,仅仅是胶合的数据的当前状态到模型负责.

所以Facebook最初使用"MV in MVC"可能就像"MVVM中的V"一样 - 控制器这个术语在后端开发世界中更有意义.

没有Redux的准系统React应用程序可以将数据直接提取到组件中(例如fetch,使用componentDidMountGraphQL),并且可以将任何类型的有限数据争用称为简单的"VVM"模型.

视图模型(VM):管理简单状态的组件相关代码,将数据直接传递到View,可能直接从View传回数据

视图(V):视觉效果如何(JSX,CSS)

添加一些复杂性,你可以称之为"MVVM"/"MVC"

如果您redux-saga使用简单的React组件状态抛出Redux,甚至开始做疯狂的事情,那么您将引入模型操作.这个模型(M)至少可以代表两件事:

1. 应用程序的实际业务逻辑
2. 在您的客户端存储和管理复杂的行为

业务逻辑在实践中有时是不可取的:例如,如果您可以控制服务器,则可能值得将所有业务逻辑保存在一个位置(在服务器上),并且只需向用户提供与用户交互所需的内容.但是如果你有有限的REST端点并且需要做一些争论(例如在你的传奇或组件内),这将是业务逻辑.

客户端行为管理很可能,特别是在复杂的应用程序中,您可能会根据其会话向用户显示不同的内容(例如,他们是未注册的用户与用户与管理员).您可能在任何仅由客户端使用的redux存储交互中执行此操作.

免责声明:讨论MVC,MVVM等可能会产生许多不同的意见,正是它们的含义[1].上面,我试图在我看到的常见模式和它们如何适应MVC/MVVM之间划分相似之处,但是有很多不同的方法来处理它或更细致的方式来思考它.只要您的系统易于理解,我就不会太擅长贴上标签:模块化,干燥,抽象等等,对您的用例和开发规模有意义.

[1]在这个问题的答案和评论中讨论了更长的篇幅