Facebook 颠覆式前端 UI 开发框架 —— React

来源：开源最前线 猿妹

前阵子Raect协议更改问题，在业内引起不小的风波，好在有惊无险，最终，FB 还是让步了，放弃专利条款，React 许可证改为标准的 MIT。那么，React 到底是有多大威力产生如此影响，一起了解下就知道了

构建用户界面的 JavaScript 库 React

授权协议：MIT

开发语言：JavaScript

操作系统：跨平台

开发厂商：Facebook

Github：https://github.com/facebook/react ★78731

React 简介

React 是 Facebook 推出的一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，但可以使用 React 作为 MVC 架构的 View 层轻易的在已有项目中使用，它是一个用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，用来架设 Instagram 的网站，于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，因此，越来越多的开发者选择使用它。

React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件（"data flows down"）的模型，数据改变时对 HTML 文档的有效更新，和现代单页应用中组件之间干净的分离。

React 有如下特性：

● 声明式

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

● 组件化

创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用 JavaScript 编写的组件你可以更好地传递数据，将应用状态和 DOM 拆分开来。

● 一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架 React Native。

React 的原理

在 Web 开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对 DOM 进行操作。而复杂或频繁的 DOM 操作通常是性能瓶颈产生的原因（如何进行高性能的复杂 DOM 操作通常是衡量一个前端开发人员技能的重要指标）。React 为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用 Javascript 实现了一套 DOM API。可以看下图：

React 能够批处理虚拟 DOM 的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。React 进行开发时所有的 DOM 构造都是通过虚拟 DOM 进行，每当数据变化时，React 都会重新构建整个 DOM 树，然后 React 将当前整个 DOM 树和上一次的 DOM 树进行对比，得到 DOM 结构的区别，然后仅仅将需要变化的部分进行实际的浏览器 DOM 更新。

可以看到，使用 React 大大降低了逻辑复杂性，意味着开发难度降低，可能产生 Bug的机会也更少。至于 React 如何做到将原来O(n^3)复杂度的 Diff 算法降低到 O（n）。

这也是为什么 React 会如此受欢迎的原因，阿里、百度、 Strikingly、杭州大搜车、美团等等企业都在使用，其实，REACT 不单单在应用于实际项目中，如果读过最近两年很火的前端框架源码的都知道，React 的影子无处不在。

代码示例

下面我们用 codepen 来演示 React.js 的一个 hello world 的示例：

如上所述，React 是一个全新思路的前端 UI 框架，它完全接管了 UI 开发中最为复杂的局部更新部分，擅长在在复杂场景下保证高性能；同时，它引入了基于组件的开发思想，从另一个角度来重新审视UI的构成。通过这种方法，不仅能够提高开发效率，而且可以让代码更容易理解，维护和测试。