为什么React不被视为MVC？

Question

我知道ReactJS不被认为是MVC，因为创建者自己已经这么说了。但是，最近，有人问我为什么要使用React，即使它适合MVC模式，也不认为它是MVC。 React呈现一个视图，当使用客户端的人进行更改时，React将考虑更改，如果需要则更新状态（不是仅是模型状态？），然后返回更新的视图（就像控制器一样）将）。我对MVC架构的严格定义有非常基本的了解，并对为什么React现在不是MVC感到非常困惑。

Answer 1

反应既不是MVC也不是MVC。这是一个渲染视图的库（有很多很酷的东西，但仍然有）。您可以使用MVC模式，Flux / Redux或其他任何方式。

MVC和Flux之间的区别在于，最新版本实现了单向数据流。因此，您的数据只能向一个方向移动。 Action -> Middleware -> Store -> View。 MVC是双向的；您可以从View和Controller更改Model。

Answer 2

React 不被视为 MVC，因为它与 MVC 在后端的构思和使用方式没有很好的对应关系。 React 是一个渲染库，理想情况下只负责视图层。它没有中央控制器作为编排器/路由器，因为后端的 MVC 架构通常已经具备。

也就是说，你可以说 React 实际上是某种意义上的 MVC（更接近 MVC 的本意）。

React 正在垂直（通过关注）切片 MVC，而不是水平（通过技术）切片，这是人们对 MVC 模式所做的。 MVC 已经成为一种分层架构，视图作为顶部的一个薄层。 （虽然原意并非如此*）。

你可以说 React 中的组件一开始是小的垂直切片封装的 MVC：包含状态（模型）、渲染（视图）和控制流逻辑（本地化的微型控制器）。

目前，组件（在 React 和 SolidJS 等前端库中）将渲染与渲染逻辑混合在一起。组件范围从完全面向视图到完全面向控件。这个can cause conceptual confusion。

但大多数组件介于两者之间；有一点渲染输出和控制流逻辑。

所以目前，React Components 更像是一个垂直切片的 ViewController，其中 Model 位包含在其他地方。例如。在像集中式 Redux 这样的状态处理库中，或者在单独/正交的 Recoil 存储中。或者只是伪包含在带有像 useState 这样的钩子的组件中（而实际上由 React 包含）。

因此，组件目前可以被视为 ViewControllers。

看到 React Components 与 iOS 的 UIViewControllers 的相似性很有趣**。也许这种来自 iOS 原生开发的心智模型影响了组件的创建，考虑到 Facebook 的 React + React Native 组合旨在拥有相同的框架和心智模型来处理纯原生和 Web。

<块引用>

'视图控制器 (VC) 管理视图并帮助制作应用程序的 UI。它与模型对象和其他控制器对象协调。它以同时扮演视图对象和控制器对象的角色而闻名。每个 VC 都显示自己的应用程序内容视图。 - iOS ViewController lifecycle

如果您需要进一步说服，只需阅读 Apple's documentation of ViewControllers in Swift，并想象他们在谈论 React 组件。几乎没有阻力（认知失调）。

更新：如今，随着大量组件逻辑被提取到 Hook 中，您可以将组件更多地看作是视图，而将钩子看作控制器。正如 ryanflorence 和 swizecteller 所指出的那样。

* 有趣的是，前端编程 (React) 仍在努力实现 MVC，因为它最初是由 Trygve Reenskaug 在 1979 年提出的，他已经用 Smalltalk 实现了它。它被实现为将界面/屏幕切成无数微小的原子/组件，每个原子/组件都遵循 MVC 模式：请参阅“屏幕上的每个小部件都有自己的模型、控制器和视图。”在MVC is not an Architecture。尽管这种方法有一些缺点，特别是与同步状态更改有关，如 this excellent and visual MVC explainer article 中以“有时 MVC 应用在单个小部件级别...”开头的部分所述。在 React 中，同步状态是通过“道具钻取”（这成为它自己的问题，由 Redux 或集中式状态库解决）结合 Flux 架构的单向数据流来处理。

** 应该注意的是，iOS ViewController - 就像后端 MVC 模式中的控制器 - 可能具有更广泛的影响 在 React 组件是 ViewController 的意义上，它比控制器更关注（如跨组件通信，更少的封装）。由于 React 组件是 React 的 JSX/DOM 层次结构和 Flux 架构的一部分。关于“控制器”的实际含义，可能有几种不同的定义。但出于我的意图和目的，我将其视为控制流逻辑的中心（无论是用于简单的视图渲染，还是在后端情况下，也用于路由和模型编排）。

Answer 3

我认为可接受的答案有点不完整，所以只想添加三个要点（使用助焊剂/氧化还原来说明答案时）。

从这里：https://medium.com/createdd-notes/understanding-mvc-architecture-with-react-6cd38e91fefd

• 处理流程是单向的，而不是双向的

• 商店能够存储任何与应用程序相关的状态，而MVC中的模型旨在存储单个对象

• 启动点Dispatcher使调试更加容易