我正在与其他开发人员的帮助重构一个大型网络应用。在我看来,后端的组织如下:
Symfony PHP: controller
PostgreSQL DB: model
据我了解,客户端浏览器是'视图'服务器。
前端另外组织如下:
Redux.js: model + controller // this is all mildly simplified
React.js: view
因此,在概念上将客户端浏览器视为服务器状态的视图是正确的,而且,浏览器维护自己的状态,控制器和服务器端数据的视图?
我是服务器端"专家" (强调引号),而我的助手是前端专业人士。我们故意尝试将前端和后端分开,并将交互限制在初始页面加载之外的JSON有效负载上。如果我正确地看待项目的全球组织,它将真正帮助我组织我们的主代码库。
答案 0 :(得分:0)
听起来不错。
React组件保持内部状态。事件(例如点击,鼠标移动,键盘输入,超时,AJAX响应等)通过this.setState
更新状态。调用this.setState
时,将调度组件的整个重新渲染,然后重新绘制组件。
这个循环还在继续。您可以将React的状态视为传统的LAMP Web应用程序,也就是说,在示例Web应用程序中,用户提交表单,页面将使用新内容进行更新。只有这样而不是你设置了监听器,并且imperatively通过传统的LAMP应用程序告诉你要传递给this.setState
的数据,你在HTML声明中做declaratively {/ 1}},在您定义的输入中。
虽然,上面的React vs LAMP示例可能是一个不好的比喻,因为React不能直接与服务器一起使用。您有责任设计代码以使用服务器。
因此,使用LAMP,如果您希望用户输入在服务器上保留,则只需记录表单POST请求中的输入。
通过反应,你可以采取额外措施。
当用户触发事件(点击,鼠标移动,键盘输入等)时,您首先需要发出一个AJAX请求,当然,服务器将根据请求(例如存储表单输入)执行操作。
在(成功)响应回调中,您将调用<form>
来更新服务器响应的内容。使用传统的LAMP应用程序,您将获得使用用户持久数据呈现的全新网页。相反,使用React可以获得一些不是网页的数据(可能是JSON或XML),但前端应用程序会使用它来确定页面的外观。
答案 1 :(得分:0)
我认为将客户端应用视为服务器端状态的视图特别有用。
客户端是它自己的MVC应用程序。严格来说,我不认为react-redux实际上是MVC。它被认为是MVC的替代品。 React是MVC中的View,也是Controller的一小部分,而redux是使用Model的一种看法。你应该在这里阅读更多内容:http://redux.js.org/docs/introduction/Motivation.html
也许另一种思考方式是服务器有一个&#39;模型&#39;而redux状态树的一部分实际上是对该模型的一种看法。 (就像从服务器端派生并与todo表保持同步的待办事项列表)。
redux状态树的某些部分也可能与服务器端模型&#39;无关。并且可以用于存储客户端状态(如当前的URL /路由)。
我坚信,不要过分担心术语,坚持第一原则。服务器具有状态,客户端应用程序具有状态。客户端应用程序状态的一部分是从服务器端状态派生和/或同步的。客户端应用程序状态的其余部分有助于生成用户看到的UI。当用户与应用程序交互时,会触发操纵状态的代码。一旦你编写了一个简单的react-redux应用程序,你就会看到所有这些内容的去向!
答案 2 :(得分:0)
因此,从概念上讲,考虑客户端是正确的 浏览器作为服务器状态的视图,进一步说明了 浏览器维护自己的状态,控制器和视图 服务器端数据?
是的,这是完全正确的。
事实上,您可以将您的Web应用程序视为一个MVC,它位于另一个MVC(浏览器)中,然后在另一个MVC(OS窗口系统)中执行。它通过网络(您的后端应用程序)与另一个MVC进行通信。
现在,交换MVC用于“软件设计模式的实现”,因为没有关于MVC的规范定义。有许多变体,例如,服务器中的MVC与客户端计算机中的MVC完全不同。
服务器端方法基于所谓的Java Model 2.这种设计与MVC具有相同的理念,并且其大多数组件与它类似,因此我们都将其称为MVC。这不是不正确的,虽然也不准确。
您可以在此处比较属于MVC集合的所有已记录模式: http://mvc.givan.se/