javascript - React 真的需要模型(如 Backbone 或 & 符号模型)吗?

标签 javascript backbone.js reactjs ampersand.js

我有 Backbone/Marionette 背景,现在已经在 React 中工作了几周了。很多人说你应该将 React 与 Backbone 或 Ampersand.js 之类的东西配对,使用 React 作为 V,使用 Backbone/Ampersand 作为经典 MVC 模型中的“M”和“C”。

但是,我越想,就越想知道这是否真的有必要。在 Backbone/& 符号中,模型的主要目的是跟踪状态,并在模型状态更改时“告诉” View 进行更新。当然,在 React 中, View 通过 View 的 propsstate 来承担这一责任,这似乎使得完整的 Backbone/Ampersand 模型变得不必要和重复。

我错过了什么?

最佳答案

首先,让我们用 MVC 术语来定义模型。以下来自Wikipedia .

[...] the model, captures the behavior of the application [...] independent of the user interface.

The model directly manages the data, logic and rules of the application. A view can be any output representation of information [...] multiple views of the same information are possible [...].

The third part, the controller, accepts input and converts it to commands for the model or view.

在 React 中,你不可避免地会创建 View+Controller 组件;很像 Angular、Knockout 和大多数其他 JS 应用程序框架。

为什么是模型?

虽然您也可以在此级别将模型放入组件中,但事实证明它在实践中效果不佳。您会遇到诸如过度获取(和其他优化限制)、测试困难、关注点分离等问题,并且很难看到组件实际上是什么,除非您在心里将 Controller 行为与模型行为分开。

那么, Backbone ?

如果你有这段代码,并且你想让它变得更好,你最终会得到模型。它可以是主干模型,也可以是通量存储,也可以只是具有调用 $.ajax 的函数的简单对象。

您使用哪种模型没有什么区别,但您确实需要它们。

对所有事物进行建模

哇哦!坚持住。模型不是免费的。每次使用模型时,您都会跨越抽象边界,并离开组件领域。这是声明性系统中的命令式操作,因此我们需要保持事情的可预测性。

你的大部分组件都非常愚蠢。 Prop ,也许还有一些 UI 状态。您有 Controller 组件(“ View Controller ”),它们 100% 与模型层绑定(bind),其余组件(理想情况下)与模型层 0% 绑定(bind)。

您在原始问题中描述的似乎是一个小型应用程序,其中您拥有这些 Controller 组件之一。然而,随着这些增长,您需要在它们之间进行协调(例如,不要两次获取同一用户)。您可以将这些 Controller 嵌套在其他 Controller 中以构建应用程序。模型就是粘合剂。

关于javascript - React 真的需要模型(如 Backbone 或 & 符号模型)吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30515933/

相关文章:

javascript - 使用本地数据库是减少从 Cloud Db 读取/写入数据的好方法吗?

javascript - d3 单击时聚焦于节点

javascript - 分组 Backbone 模型变更

testing - 如何测试 Backbone View 事件是否将项目添加到集合中?

javascript - 如何默认将主干 View 设置为单例?

javascript - 在 React-Redux 应用程序中访问另一个组件中的 Connect 函数值时出现问题

javascript - 需要在对象之前和之后添加/div等断开连接的html代码

node.js - 托管没有端口的 Nodejs 应用程序

reactjs - 提取组件后的"Expected subtree parent to be a mounted class component. "

javascript - 固定 div 右侧的悬停菜单