如果你在两个月前问我对React的看法,我很可能这样说:
我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧!
那是因为我没有理解它.
我发誓,React 无疑是在正确的轨道上, 请听我道来.
Good old MVC
在一个交互式应用程序一切罪恶的根源是管理状态。
“传统”的方式是MVC架构，或者一些变体。
MVC提出你的模型是检验真理的唯一来源 - 所有的状态住在那里。
视图是源自模型，并且必须保持同步。
当模式的转变，所以没有查看。
最后，用户交互是由控制器，它更新模型抓获。
到目前为止，一切都很好。
模型发生变化时就要对视图进行渲染
这看起来相当简单。首先，我们需要描述视图——它是如何将模型状态转换到DOM上去的。然后，用户一发生了什么操作我们就要对模型进行更新，并且要对整个页面进行重新渲染... 对不? 没这么快哦. 不幸的事，这其实并没有这么直接，因为如下两个原因:
DOM实际上有某种状态，就比如一个文本输入框中的内容. 如果你完全作废你的DOM来进行重新渲染，这样的内容会丢失掉.
DOM 操作 (像删除和插入节点) 真的慢. 频繁的渲染会导致严重的性能问题.
那么我们如果在避免这些问题的前提下保持模型和视图同步呢?
数据绑定
过去三年，被引进用来解决这个问题最常用多框架功能就是数据绑定.
数据绑定能自动地保持模型和视图的同步. 通常在JavaScript中就代表了对象和DOM.
它会通过让你声明应用中各个块之间的依赖来对这一同步进行打包。状态的变化会在整个应用程序中蔓延，然后所有的依赖块都会被自动更新.
让我们来看看一些有名的框架中它实际是如何运作的吧.
Knockout
Knockout 主张使用的是 MVVM (模型－视图－视图模型) 方法，并且帮你实现了“视图”的部分:
// View (a template) <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> // ViewModel (diplay data... and logic?) var ViewModel = function(first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.fullName = ko.pureComputed(function() { // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. return this.firstName() + " " + this.lastName(); }, this); };
而这就是了. 不管改变那边的输入值都在让span中发生变化。你从来都不需要写代码将其进行绑定。这多酷啊，呵?
但是等等，模型不是真相的来源么? 这里的视图模型从来获得它的状态呢? 它是怎么知道模型发生了变化的呢? 有趣的问题啊.
Angular
Angular 采用保持模型和视图同步的方式描述了数据绑定. 文档时这么描述的:
但是... 视图应该直接通模型打交道么? 这样它们不久紧紧的耦合起来了么?
不管怎么样，我们还是来义务地看看hello world示例吧:
// View (a template) <div ng-controller="HelloController as hello"> <label>Name:</label> <input type="text" ng-model="hello.firstName"> <input type="text" ng-model="hello.lastName"> <h1>Hello {{hello.fullName()}}!</h1> </div> // Controller angular.module('helloApp', []) .controller('HelloController', function() { var hello = this; hello.fullName = function() { return hello.firstName + hello.lastName; }; });
从这个示例中，看起来像是控制器有了状态，并且有类似模型的行为 - 或者也许是一个视图模型? 假设模型在其它的地方, 那它是如何保持与控制器的同步的呢?
我的头开始有点儿疼了.
数据绑定的问题
数据绑定在小的例子中运行起来很不错。不过，随着你的应用规模变大，你可能会遇到下面这些问题.
声明的依赖会很快引入循环
最经常要处理的问题就是对付状态中变化的副作用。这张图来自 Flux 介绍，它解释了依赖是如何开始挖坑的：
