React.js那些事(介绍篇)

引言

WEB前端开发的发展历史大概经过了“原始时代——类库时代——工程构建时代——模块化时代”。目前前端领域的发展正处在一个空前繁荣的阶段——“模块化/组件化时代”。

原始时代

曾几何时,前端开发在软件工程的技术栈里面只被视为设计类岗位,甚至现在为止也有一些小企业依然把前端的职责视为简单的编写html+css页面。早期的前端开发完全依赖于后端技术,所有的数据渲染都由后端开发者进行,界面源码和后台逻辑代码混在一起。这个时代的前端无疑是非常薄的,薄到“网页开发人员”的入门门槛几乎低至为零。

类库时代

这一阶段出现了对js封装的各种类库,代表作当然就是前端领域从业者无所不知的jquery库啦。类库时代的开发者承担了很大一部分数据交互的工作。借鉴于AJAX,开发过程可以实现很好的前后端分离,MVC开发框架日益盛行。这个时代,前端开发者在一定程度上摆脱了对后端的严重依赖,使得前后端开发依赖于接口,大大加快了开发效率。

工程构建时代

基于各种自动化构建工具部署前端代码是这一时代的基本特征,前端发展到今天,自动化构建依然是当前的技术主流,Grunt,gulp.js以及国内的Fis等都是自动化代码优化和部署的热门工具。

模块化时代

模块化时代标志着前端开发正式进入工程化阶段,“前端工程师”正式成为名副其实的“工程师”。我之所以这样认为是因为这一阶段前端开发可以完全实现代码的重用,实现模块化开发,系统化、规范化的软件开发就是“软件工程”。所以前端工程师也就是在这一阶段日渐活跃,需求量也迅猛增长。前端模块时代的技术代表就是Require.js以及国内的sea.js这样的模块加载器。在MVC开发模式的基础上实现了对视图层的模块化开发,MVC框架至此达到一个鼎盛阶段。
然而前端之所以迷人在于新的开发模式和技术不会停止出现,不同的应用需求催生了新的开发技术的诞生。最近几年,组件化开发正成为前端领域的潮流,组件开发减少了代码的耦合,非常适合大型网站应用的开发(这类大型网站的特点就是大量的模块类似或者重复)。可实现代码高度重用的MVVM框架开发进入开发者眼中——这就是React.js的诞生背景

React.js

React是什么东西?

来自官网的介绍:

  • 仅仅是UI
    许多人使用React作为MVC架构的V层。尽管React并没有假设过你的其余技术栈,但它仍可以作为一个小特征轻易地在已有项目中使用。
  • 虚拟DOM
    React为了更高超的性能而使用虚拟DOM作为其不同的实现。它同时也可以由服务端Node.js渲染而不需要过重的浏览器DOM支持。
  • 数据流
    React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

也就是说,React是一个视图层的应用,并且是一个高效的视图。React提供了和以往不一样的方式来看待视图,它以组件开发为基础。对React应用而言,你需要分割你的页面,使其成为一个个的组件。也就是说,你的应用是由这些组件组合而成的。组件本身可以实现数据流的的单向流动,实现独立开发。这就是我们所说的“组件驱动开发”。

虚拟DOM

React的一大特点是其所拥有的虚拟DOM,它让页面渲染变得非常的高效,并且比直接操纵DOM变得更为可控。由于虚拟DOM的绘制是在内存里面进行的,高效是它的特征。这两大特点的组合使得React具有强大的自上而下的页面渲染能力。

React提供了一个观察者模型用于替代传统的脏检查(dirty checking), 也就是持续的检查模型的变化。这也就是解释了为什么React不需要计算哪些发生了改变的原因,因为它根据state的变化会立即知道。这个过程减少了DOM操作,并让应用程序变得更平滑。我们知道DOM操作是非常耗性能的,更少的DOM操作意味着更高效的渲染。React在底层实现了一个diffing算法,该算法使用DOM的树形表示法,当某个 节点发生变化(标记为dirty)时它会重新计算整个子树,你会注意到你的模型发生了改变,因为整个子树在之后会被重新渲染。

JSX

JSX是什么鬼???JSX是一个看起来很像XML的JavaScript语法扩展。React可以用来做简单的JSX句法转换。React提供了(也是建议使用)JSX代替JS进行组件绘制,然后运行的时候使用一个JSX编译器进行转换。JSX的使用还是比较简单的:
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

1
2
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

1
2
3
var MyComponent = React.createClass({/*一些代码*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

本节结语

关于React.js的入门介绍暂时到这里,想要更多地了解React.js的朋友可以进入官方文档进行学习。