我们为什么构建React

现在已经存在很多 JavaScript MVC 框架了,为什么我们还要创建 React 并且你为什么会去用它?

React 并不是一个 MVC 框架

React 是一个构建合成式用户界面的库。它鼓励创建可重用的 UI 组件,这些组件能跟随数据变化进行展示。

React 不使用模板

通常,Web 应用使用模板或 HTML 指令来构建用户界面。这些模板主导了所用你可以用来构建用户界面的抽象集合。

React 允许通过把用户界面拆分成组件来进行构建。这意味着 React 使用了真正的、全功能的编程语言来渲染视图,这样一来相对模板语言具有一定优势,原因如下:

  • JavaScript 是一个灵活的,强大的具有抽象能力的编程语言。这在大型应用中非常重要。

  • 通过统一你的标记和它所对应的视图逻辑,React 实际上可以使视图更容易扩展和维护

  • 通过将标记和内容解释成 JavaScript,这里就没有手动的字符串插入,因此降低了 XSS 漏洞的暴露面积。

我们同样提供了 JSX,一个可选的语法扩展,如果你喜欢使用 HTML 的易读性来书写原生 JavaScript。

即时更新非常简单

当数据随着时间更新时,React 会跟随着变化。

在一个传统的 JavaScript 应用中,你需要去监控什么数据发生了改变,然后立刻操作 DOM 节点来确保视图和数据保持一致。即使 AngularJS,也需要通过指令和数据绑定提供一个声明式的接口需要绑定一个函数来手动更新 DOM 节点

React 采用不用的方法

当你的组件第一次初始化,render 方法被调用,生成轻量级表现形式的视图。通过这个表现形式,标签字符串被生成,然后插入到文档中。当数据发生变化时,render 方法再次被调用。为了确保更新的高效性,我们将上次和本次 render 方法的返回值进行比较,然后生成最小的变化来应用到 DOM 结构中。

render 方法的返回值既不是字符串也不是 DOM 节点 —— 它是一种对 DOM 结构轻量级的表述方法。

我们把这个过程叫做和解。通过这个 jsFiddle可以查看一个关于和解如何进行的实例。

因为重新渲染是如此的快速(大概 1 毫秒),开发者无需去明确的声明数据绑定。我们已经证实该方法使得构建 APP 变得简单。

HTML 仅仅只是开始

因为 React 拥有对文档独有的轻量级表述方式,我可以利用它做一些非常酷的事情:

  • Facebook 有许多渲染在 <canvas> 而不是 HTML 上的动态图表。
  • Instagram 是一个完全由 React 和 Backbone.Router 构建的“单页” web 应用。设计者定期使用 JSX 语法贡献 React 代码。
  • 我们已经有了一个内部项目原型,该项目使用 Objective-C 作为桥接,使得 React 应用可以运行在一个 web 工作环境中,并使用 React 去驱动原生 IOS 视图
  • 你可以在服务端运行 React 来做 SEO、性能优化、代码分享等很多灵活性的内容。
  • 在所有浏览器中(包括 IE 8)具有统一的、标准的、兼容的行为表现,并且自动使用了事件委托

请浏览https://reactjs.org来了解我们构建了哪些东西。我们的文档是面向如何使用框架一步步构建应用的,但如果你对其中的实现原理感兴趣,请联系我们!

感谢阅读!

译者按

该文翻译自 React 官方博客中的Why did we build React?,发布于 2013 年 6 月 5 日,作者为Pete Hunt