深入理解JavaScript的React框架的原理_基礎知識

如果你在兩個月前問我對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 id="Hello-span-data-bind-text-fullName-span">Hello, <span data-bind="text: fullName"> </span>!</h2>
// ViewModel (diplay data... and logic&#63;)
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 id="Hello-hello-fullName">Hello {{hello.fullName()}}!</h1>
</div>
 
// Controller 
angular.module('helloApp', []) 
.controller('HelloController', function() {
 var hello = this;
 hello.fullName = function() {
  return hello.firstName + hello.lastName;
 };
});

从这个示例中，看起来像是控制器有了状态，并且有类似模型的行为 - 或者也许是一个视图模型? 假设模型在其它的地方, 那它是如何保持与控制器的同步的呢?

我的头开始有点儿疼了.
数据绑定的问题

数据绑定在小的例子中运行起来很不错。不过，随着你的应用规模变大，你可能会遇到下面这些问题.

声明的依赖会很快引入循环

最经常要处理的问题就是对付状态中变化的副作用。这张图来自 Flux 介绍，它解释了依赖是如何开始挖坑的：

你能预计到当一个模型发生变化时跟着会发生什么改变么? 当依赖发生变化时，对于可以任意次序执行的代码你很难推理出问题的起因。
模板和展示逻辑被人为的分离

视图扮演了什么角色呢? 它扮演的就是向用户展示数据的角色。视图模型扮演的角色又是什么呢? 它扮演的也是向用户展示数据的角色？有啥不同？完全没有！

•     毫无疑问，模板割裂了计数  ~ Pete Hunt

最后，视图组件应该能操作其数据并以需要的格式对数据进行展示。然后，所有的模板语言本质上都是有缺陷的：它们从来都不能达到跟代码一样的表现力和功能。

很简单， {{# each}}, ng-repeat 和 databind="foreach" 这些都是针对 JavaScript 中某些原生和琐碎事务的拙劣替代物。而它们不会更进一步走得更远。因此它们不会为你提供过滤器或者映射。

数据绑定是应重新渲染而生的小技巧

什么是圣杯不再我们的讨论之列。每个人总是想要得到的是，当状态发生变化时能重新对整个应用进行渲染。这样，我们就不用去处理所有麻烦问题的根源了：状态总是会随着时间发生变化——给定任何特定的状态，我们就可以简单的描述出应用回是什么样子的。

好了，问题清楚了。哥们，我希望某些大公司能组个超能天才开发者团来真正解决这个问题...
拥抱Facebook的React

事实证明他们做到了。React实现了一个虚拟的DOM，一种给我们带来的圣杯的利器.
虚拟的DOM是啥东西呢?

很高兴你能这么问？让我们来看看一个简单React示例.
 

var Hello = React.createClass({ 
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.render(<Hello name="World" />, document.getElementById('container'));

这就是一个React组件的所有API。你必须要有一个渲染方法。复杂吧，呵呵?

OK, 但是

是什么意思? 那不是 JavaScript 啊! 对了，它就不是.

你的新伙伴，JSX

这段代码实际上是用 JSX 写的，它是 JavaScript 的一个超集，包含了用于定义组件的语法。上面的代码会被编译成 JavaScript，因此实际上会变成：
 

var Hello = React.createClass({displayName: "Hello", 
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});
React.render(React.createElement(Hello, {name: "World"}), document.getElementById('container'));

你明白这段对 createElement 调用的代码么? 这些对象组成了虚拟 DOM 的实现。

很简单 : React 首先在内存中对应用的整个结构进行了组装。然后它会把这个结构装换成实际的 DOM 节点并将其插入浏览器的 DOM 中。

OK，但是用这些奇怪的 createElement 函数编写 HTML 的目的是什么呢？
 
虚拟的DOM就是快

我们已经讨论过, 操作 DOM 消耗大得离谱，因此它必须以尽可能少的时间完成。

React 的虚拟 DOM 使得两棵 DOM 结构的比对真正快起来，并且能确切的找到它们之间有什么变化. 如此，React 就能计算出更新 DOM 所需要做出的最小变更。

实话说，React 能比对两棵 DOM 树，找出它所要执行的最小操作集。这有两个意义:

1.     如果一个带有文本的输入框被重新渲染，React 会知道它有的内容, 它不会碰那个碰那个输入框。不会有状态发生丢失的!
2.     比对虚拟 DOM 开销一点也不昂贵，因此我们想怎么比对都可以。当其准备好要对 DOM 进行实际的修改时，它只会进行最少量的操作。没有额外的拖慢布局之虞!

那我们还要在状态发生变化时记住这两个对整个 app 进行重新渲染的问题么?

这都是过去式了。

React 将状态映射到 DOM

React 中只有虚拟 DOM 的渲染和比对是神奇的部分。其优秀性能是使得我们拥有简化了许多的整理架构的基础。有多简单呢?

     React 组件都是幂等（一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同）的函数。它们能在任意一个实时的点来描述你的UI。~ Pete Hunt, React: 对最佳实践的重新思考

简单的幂等函数。

React 组件整个就是这么一个东西，真的。它将当前的应用状态映射到了 DOM。并且你也拥有JavaScript的全部能力去描述你的 UI——循环，函数，作用域，组合，模块 - 不是一个蹩脚的模板语言哦.
 

var CommentList = React.createClass({ 
 render: function() {
  var commentNodes = this.props.data.map(function (comment) {
   return (    <Comment author={comment.author}>
     {comment.text}    </Comment>
   );
  });
  return (   <div className="commentList">
    {commentNodes}   </div>
  );
 }
});
 
var CommentBox = React.createClass({ 
 render: function() {
  return (   <div className="commentBox">
    <h1 id="Comments">Comments</h1>
    <CommentList data={this.props.data} />
   </div>
  );
 }
});
 
React.render( 
 <CommentBox data={data} />,
 document.getElementById('content')
);

今天就开始使用 React

React 一开始会有点令人生畏。它提出了一个实在是太大了点的模式转变，这总有点令人不舒服。不过，当你开始使用它时其优势会变得清楚起来。

React 文档很优秀. 你应该照着教程对其进行一下尝试。我确信如果你给它一个机会，你肯定会爱上她。

编码快乐!