ReactJS 应用程序的 MVVM 架构模式

Question

我是半高级 react 和 JavaScript 开发人员，我已经制作了几个通用 react 应用程序。

今天我们的 CTO 告诉我： 你的应用程序使用软件架构模式吗？

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

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

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

因此： react 应用程序真的需要软件架构模式吗？

原文由 AmerllicA 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 本身对软件架构并不是特别自以为是。它是一个库，可促进可重用组件范例以及管理状态和数据共享（props）等事物的指南。在某些时候，Facebook 将其描述为 the V in MVC 但后来不再使用该营销方式，而是更抽象地称呼它 A JavaScript library for building user interfaces 。

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

有几种可能的思考方式：

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

在开发领域，MVC 可能是两者中最著名的一个。控制器 © 和视图模型 (VM) 之间的关键概念差异可以归结为： 控制器 可以承担许多不同的职责，比如监听事件并将它们路由到正确的方向。它是促进整个应用程序功能的粘合剂。另一方面， 视图模型 只负责将数据的当前状态粘合到模型中。

因此，Facebook 最初使用“MVC 中的 V”可能很容易就是“MVVM 中的 V”——术语控制器在后端开发领域更有意义。

一个没有 Redux 的准系统 React 应用程序，它直接将数据拉入组件（例如 fetch 在 componentDidMount 或利用 GraphQL），任何类型的数据处理都有限，可以称为简单的“监测卡”模型。

View-Model (VM) ：管理简单状态的组件相关代码，将数据直接传递到 View，可能直接从 View 传回数据

视图 (V) ：视觉效果（JSX、CSS）

添加一些复杂性，您可以将其称为“MVVM”/“MVC”

如果你使用 Redux， redux-saga ，或者甚至开始用简单的 React 组件状态做一些疯狂的事情，你就是在引入模型操作。这个 模型（M） 至少可以代表两件事：

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

业务逻辑有时在实践中是不可取的：例如，如果您可以控制服务器，那么将所有业务逻辑放在一个地方（在服务器上）可能是值得的，并且只向 UI 提供与用户交互所需的内容。但是，如果您的 REST 端点有限并且需要进行一些争论（例如，在您的 sagas 中或在组件中），那将是业务逻辑。

客户端行为管理是可能的，特别是在复杂的应用程序中，您可能会根据用户的会话（例如，他们是未注册用户与用户与管理员）做一些事情，比如向用户显示不同的东西。您可能在仅供客户端使用的任何 redux 存储交互中执行此操作。

---

免责声明：讨论 MVC、MVVM 等可能会导致对它们的 确切含义 有许多不同的看法 [1]。在上文中，我试图将我见过的常见模式与它们如何适应 MVC/MVVM 进行比较，但是有很多不同的方法来处理它或更细化的思考方式。只要您的系统易于理解，我就不会太在意在其上贴上标签：模块化、DRY、抽象等级别对您的用例和开发规模有意义。

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

原文由 Tadas Antanavicius 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Vue 3 是 MVVM：

       Proxy       Update
  Model → ViewModel → View
  Model ← ViewModel ← View
      Update      Event

并做出反应：

      setState     Update
  Model → ViewModel → View
  Model ← ViewModel ← View
      Update      Event

不同之处仅在于框架如何将模型更改通知给 ViewModel。

原文由 Wenfang Du 发布，翻译遵循 CC BY-SA 4.0 许可协议