ReactJS 应用程序的 MVVM 架构模式
MVVM architectural pattern for a ReactJS application
我是半高级 react 和 JavaScript 开发人员，我制作了几个通用 react 应用程序。
今天我们的 CTO 告诉我：您的应用程序是否使用软件架构模式？
我没有答案，他指出 Android 团队使用 MVVM 进行申请。
我正在贪婪地搜索，但没有找到这种情况的趋势方法或示例。我用过 Redux、Redux-Saga、React-Context 等
不知道怎么跟我们的CTO解释，他的回答是什么？
因此：react 应用程序真的需要软件架构模式吗？
React 本身对软件架构并不是特别自以为是。它是一个库，可促进可重用组件范例以及管理状态和数据共享（props）等事物的指南。在某些时候，Facebook 将其描述为 the V in MVC，但此后不再使用该营销方式，而是更抽象地称其为 A JavaScript library for building user interfaces。
当然，与 React 应用程序相关的典型工具在一起使用时确实适合某种架构。
几个可能的思考方式：
简单的 React 应用程序可能只是 "VVM" 或 "VC"
在开发领域，MVC 可能是两者中最著名的一个。控制器 (C) 和视图模型 (VM) 之间的关键概念差异可以归结为：控制器 可以有许多不同的职责，比如监听事件并将它们路由到正确的方向。它是促进整个应用程序功能的粘合剂。另一方面，view-model 只负责将数据的当前状态粘合到模型中。
所以 Facebook 最初对 "V in MVC" 的使用可能和 "V in MVVM" 一样简单 - 术语控制器在后端开发领域更有意义。
一个没有 Redux 的准系统 React 应用程序，它将数据直接拉入组件（例如 fetch 在 componentDidMount 中或利用 GraphQL），任何类型的数据争论都有限，可以称为简单"VVM" 型号。
View-Model (VM)：管理简单状态的组件相关代码，将数据直接传递到 View，可能直接从 View 传回数据
View (V)：视觉效果如何（JSX，CSS）
增加一些复杂性，你可以称它为"MVVM"/"MVC"
如果您使用 Redux，redux-saga，或者甚至开始使用简单的 React 组件状态做一些疯狂的事情，那么您就是在引入模型操作。这个模型(M)至少可以代表两件事：
- 您的应用程序的实际业务逻辑
- 在您的客户端中存储和管理复杂行为
业务逻辑有时在实践中是不可取的：例如，如果您可以控制服务器，则可能值得将所有业务逻辑放在一个地方（在服务器上）并只提供 UI它需要与用户交互的内容。但是，如果您的 REST 端点有限并且需要进行一些争论（例如，在您的 sagas 中或在组件中），那将是业务逻辑。
可能会进行客户端行为管理，尤其是在复杂的应用程序中，您可能会根据用户的会话向用户显示不同的内容（例如，他们是未注册用户、用户还是管理员）。您可能在仅供客户端使用的任何 redux 存储交互中执行此操作。
免责声明：讨论 MVC、MVVM 等可能会导致对确切其含义的许多不同意见[1] .在上文中，我试图将我见过的常见模式与它们如何适应 MVC/MVVM 进行比较，但是有很多不同的方法来处理它或更细化的思考方式。只要您的系统易于理解，我就不会太在意在其上贴上标签：模块化、DRY、抽象等级别对您的用例和开发规模有意义。
[1] 在answers and comments to this question
中讨论了更多篇幅
一个简单的Web App不需要MVC、MVVM，甚至不需要React IMO。
一个简单的 ReactJS 应用程序的可能演变，如果它试图成为 PWA（渐进式 Web 应用程序），可能会看到 MVVM/MVC/ 的需要。换句话说 - 如果它尝试执行某些 (application/domain) 特定逻辑 - 离线和其他一些 - 在线。这是移动应用程序开发的自然思维点。然后，可以从本地存储或 IndexedDB（用于 Web）或 Back-End/Rest/ 检索信息。然后，模型、Storage/Repository/Source 的 IInfo/ ViewModel/ 或 Controller/ 和 View 的分离将是自然而然的，并且实际上是所有东西正常工作所需要的...
我是半高级 react 和 JavaScript 开发人员，我制作了几个通用 react 应用程序。
今天我们的 CTO 告诉我：您的应用程序是否使用软件架构模式？
我没有答案，他指出 Android 团队使用 MVVM 进行申请。
我正在贪婪地搜索，但没有找到这种情况的趋势方法或示例。我用过 Redux、Redux-Saga、React-Context 等
不知道怎么跟我们的CTO解释，他的回答是什么？
因此：react 应用程序真的需要软件架构模式吗？
React 本身对软件架构并不是特别自以为是。它是一个库，可促进可重用组件范例以及管理状态和数据共享（props）等事物的指南。在某些时候，Facebook 将其描述为 the V in MVC，但此后不再使用该营销方式，而是更抽象地称其为 A JavaScript library for building user interfaces。
当然，与 React 应用程序相关的典型工具在一起使用时确实适合某种架构。
几个可能的思考方式：
简单的 React 应用程序可能只是 "VVM" 或 "VC"
在开发领域，MVC 可能是两者中最著名的一个。控制器 (C) 和视图模型 (VM) 之间的关键概念差异可以归结为：控制器 可以有许多不同的职责，比如监听事件并将它们路由到正确的方向。它是促进整个应用程序功能的粘合剂。另一方面，view-model 只负责将数据的当前状态粘合到模型中。
所以 Facebook 最初对 "V in MVC" 的使用可能和 "V in MVVM" 一样简单 - 术语控制器在后端开发领域更有意义。
一个没有 Redux 的准系统 React 应用程序，它将数据直接拉入组件（例如 fetch 在 componentDidMount 中或利用 GraphQL），任何类型的数据争论都有限，可以称为简单"VVM" 型号。
View-Model (VM)：管理简单状态的组件相关代码，将数据直接传递到 View，可能直接从 View 传回数据
View (V)：视觉效果如何（JSX，CSS）
增加一些复杂性，你可以称它为"MVVM"/"MVC"
如果您使用 Redux，redux-saga，或者甚至开始使用简单的 React 组件状态做一些疯狂的事情，那么您就是在引入模型操作。这个模型(M)至少可以代表两件事：
- 您的应用程序的实际业务逻辑
- 在您的客户端中存储和管理复杂行为
业务逻辑有时在实践中是不可取的：例如，如果您可以控制服务器，则可能值得将所有业务逻辑放在一个地方（在服务器上）并只提供 UI它需要与用户交互的内容。但是，如果您的 REST 端点有限并且需要进行一些争论（例如，在您的 sagas 中或在组件中），那将是业务逻辑。
可能会进行客户端行为管理，尤其是在复杂的应用程序中，您可能会根据用户的会话向用户显示不同的内容（例如，他们是未注册用户、用户还是管理员）。您可能在仅供客户端使用的任何 redux 存储交互中执行此操作。
免责声明：讨论 MVC、MVVM 等可能会导致对确切其含义的许多不同意见[1] .在上文中，我试图将我见过的常见模式与它们如何适应 MVC/MVVM 进行比较，但是有很多不同的方法来处理它或更细化的思考方式。只要您的系统易于理解，我就不会太在意在其上贴上标签：模块化、DRY、抽象等级别对您的用例和开发规模有意义。
[1] 在answers and comments to this question
中讨论了更多篇幅一个简单的Web App不需要MVC、MVVM，甚至不需要React IMO。 一个简单的 ReactJS 应用程序的可能演变，如果它试图成为 PWA（渐进式 Web 应用程序），可能会看到 MVVM/MVC/ 的需要。换句话说 - 如果它尝试执行某些 (application/domain) 特定逻辑 - 离线和其他一些 - 在线。这是移动应用程序开发的自然思维点。然后，可以从本地存储或 IndexedDB（用于 Web）或 Back-End/Rest/ 检索信息。然后，模型、Storage/Repository/Source 的 IInfo/ ViewModel/ 或 Controller/ 和 View 的分离将是自然而然的，并且实际上是所有东西正常工作所需要的...