草庐IT

javascript - ReactJS 应用程序的 MVVM 架构模式

coder 2024-05-11 原文

我是一名半高级 reactJavaScript 开发人员,我制作了几个通用的 react 应用程序。

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

我没有答案,他指出 Android 团队在他们的应用程序中使用 MVVM

我正在贪婪地搜索,但没有找到这种情况的趋势方法或示例。我用过 ReduxRedux-SagaReact-Context

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

因此:React 应用真的需要软件架构模式吗?

最佳答案

React 本身对软件架构并不是特别自以为是。它是一个库,可促进可重用组件范例以及管理状态和数据共享(props)等事物的指南。在某个时候,Facebook 将其描述为MVC 中的 V,但此后不再采用这种营销方式,而是将其更抽象地称为用于构建用户界面的 JavaScript 库

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

一些可能的思考方式:

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

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

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

没有 Redux 的准系统 React 应用程序将数据直接拉入组件(例如 componentDidMount 中的 fetch 或利用 GraphQL),任何类型的数据处理都有限称为简单的“VVM”模型。

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

View (V):视觉效果(JSX、CSS)

增加一些复杂性,你可以称之为“MVVM”/“MVC”

如果您使用 Redux、redux-saga,甚至开始使用简单的 React 组件状态做一些疯狂的事情,那么您就是在引入模型操作。这个模型 (M) 至少可以表示两件事:

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

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

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


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

[1] 在answers and comments to this question中讨论了更多篇幅

关于javascript - ReactJS 应用程序的 MVVM 架构模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51506440/

有关javascript - ReactJS 应用程序的 MVVM 架构模式的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  3. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  6. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  7. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  8. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  9. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  10. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

随机推荐