ReactJS应用程序的MVVM架构模式

我是一名半高级react和JavaScript开发人员，我编写了一些通用react应用程序。

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

我没有答案，他指出了用于他们的应用程序的Android团队MVVM。

我正在搜索贪婪的内容，但找不到这种情况的趋势方法或示例。我用Redux，Redux-Saga，React-Context等。

我不知道如何向我们的首席技术官解释，或者他的回答是什么？

因此：

对于软件体系结构，React本身并不特别自以为是。它是一个库，可促进可重用组件范例以及用于管理状态和数据共享（props）之类的准则。在某个时候，Facebook将其描述为，the

V in MVC但此后便不再使用该营销手段，而是更抽象地称呼它A JavaScript library for building user

interfaces。

当然，与React应用程序关联的典型工具在一起使用时确实适合某种架构。

有几种潜在的思考方式：

在开发世界中，MVC可能是两者中最著名的。控制器（C）和视图模型（VM）之间的关键概念差异可以归结为：

可以承担许多不同的职责，例如侦听事件并按正确的方向路由它们。胶水促进了整个应用程序的功能。甲

，另一方面，仅仅是胶合的数据的当前状态到模型负责。

因此，Facebook最初对“ MVC中的V”的使用可能很容易与“ MVVM中的V”一样使用-在后端开发世界中，控制器一词更有意义。

一个没有Redux的准系统React应用程序，可以通过任何形式的有限数据整理将数据直接拉入组件（例如fetchin

componentDidMount或利用GraphQL），可以称为简单的“ VVM”模型。

：与组件相关的代码，用于管理简单状态，将数据直接传递到View上，并有可能将数据直接从View传递回来

：视觉效果（JSX，CSS）

如果您在Redux中折腾redux-saga，或者甚至开始使用简单的React组件状态来做疯狂的事情，那么您将引入模型操作。该

至少可以表示两件事：

业务逻辑有时在实践中有时是不可取的：例如，如果您对服务器具有控制权，则可能值得将所有业务逻辑都放在一个位置（在服务器上），并仅向UI提供与用户交互所需的内容。但是，如果您的REST端点有限，并且需要做一些争执（例如，在sagas中或在组件中），那将是业务逻辑。

客户端行为管理是可能的，尤其是在复杂的应用程序中，您可能正在执行一些操作，例如根据用户的会话向用户显示不同的内容（例如，他们是未注册的用户vs.用户vs.

admin）。您可能正在包含仅供客户端使用的任何redux存储交互中执行此操作。

：在讨论MVC，MVVM等很可能会导致很多不同的意见究竟他们是什么意思[1]。上面，我试图在常见的模式与它们如何适用于MVC /

MVVM之间进行比较，但是有很多不同的方法可以使用它，也可以使用更精细的方式来考虑。只要您的系统易于理解，我就不会在标签上贴上标签：模块化，DRY，抽象等，这些级别对您的用例和开发规模才有意义。