【译】为什么我们要创造 React?

1,087 阅读4分钟
原文链接: www.alloyteam.com

目前已经有很多JavaScript MVC框架了。为什么我们还要创造React而为什么你会想使用它呢?

React 不是一个MVC框架

React 是一个用来构建可拼装化的UI界面的js库。它鼓励创造可复用性的UI组件,这些组件的特点之一是当前数据会随着时间发生改变。

React 不使用模版

习惯上,web应用的UI界面是通过模版或HTML指令来搭建的。你可以使用这一整套将页面抽象化了的模版来构造你的UI界面。

React 在处理构建UI界面的不同之处在于它是以组件形式将UI界面阻断。这意味着React用的是一门真实的,全能的编程语言去渲染视图(View层),同时我们也看到了比采用模版更优秀的一些原因:

  • JavaScript是一门灵活的强大的,并且有能力构建各种抽象的编程语言。这一点在大型的应用中是非常重要的。
  • 通过将你的标识和它们相关联的View层的逻辑统一起来,React实际上就可以让View层更容易扩展和维护
  • 通过将对标记元素和内容的理解融入JavaScript之中,没有手动添加的字符串拼接,因此很少有引发XSS漏洞的地方。

此外,我们也创造了JSX,一种可选的语法扩展,如果相对于原生JavaScript,你更喜欢HTML的可读性,那么你将会爱上它。

简单到要命的响应式更新

当你的数据是动态变化时,React真的是好用到爆了。

在一般的JavaScript应用中,你需要关注数据的变化还有与之相关的DOM的更新。即使是AngularJS也一样,它只是通过指令和数据绑定(这需要一个关联函数手动地更新DOM节点)来提供一个声明接口。

React采用了不同的方法。

当你的组件第一次被初始化时,render方法将被调用,继而生成一个轻量级的View层的展示层。对于这个展示层,它产生了一连串的标识,另外它也被注入到document之中了。当你的数据变化时,这个render方法将再次被调用。为了尽可能高效地执行更新,我们对先前调用的render方法的返回值与新的值进行差异对比,由此生成最小的变化集合来应用到DOM的更新上面。

     从render方法返回的数据既不是一个字符串又不是一个DOM节点——它是一个轻量级的关于DOM应该是什么样的描述。 

我们称这个过程叫做reconciliation(调节)。   点击这个jsFiddle去看看一个采用reconciliation跑起来的例子。

因为这个重新渲染是非常快的(对于TodoMVC只花了大概1毫秒),所以开发者并不需要明确地指定数据的绑定。我们发现这个方式可以让构建应用程序变得更加容易。

HTML仅仅是个开始。

因为React拥有自己的轻量的document展示层,所以我们可以用这个来做一些很酷的东西:

  • Facebook有用而不是HTML来渲染的动态图表。
  • Instagram 是一个完全采用React和Backbone.Router 构建的单页应用。设计者会定期地贡献使用JSX编写的React代码。
  • 我们已经构建了在一个web worker中运行React应用程序的内部原型还有使用React通过Objective-C的桥接接口来操纵原生的iOS视图层 
  • 为了SEO、性能、共享代码还有项目整体的灵活性,你可以在服务器端运行React
  • 事件在全部现代浏览器(包括IE8)下表现一致性还有符合标准化,同时也自动地采用了事件委托 。

赶紧到facebook.github.io/react 去看看我们已经构建好了的项目吧。

我们的文档是面向使用这个框架来构建应用的,但如果你有兴趣了解具体细节的话,就联系我们吧。

感谢阅读完本文!

原文地址:Why did we build React?

译者注:作为【React系列文章】的开盘菜,还是有必要把官方的自白先引过来,

随后的文章里面将会对React的使用与原理进行剖析,并横向地与Angular进行关联对比。

敬请期待。