ReactJs初见

如今最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一块儿领略
ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~

1、ReactJS简介

React 起源于 Facebook 的内部项目，由于该公司对市场上全部 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设 Instagram 的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。因为 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却很是简单。因此，愈来愈多的人开始关注和使用，认为它多是未来 Web 开发的主流工具。

ReactJS官网地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

2、对ReactJS的认识及ReactJS的优势

首先，对于React，有一些认识误区，这里先总结一下：

• React不是一个完整的MVC框架，最多能够认为是MVC中的V（View），甚至React并不很是承认MVC开发模式；

• React的服务器端Render能力只能算是一个锦上添花的功能，并非其核心出发点，事实上React官方站点几乎没有说起其在服务器端的应用；

• 有人拿React和Web Component相提并论，但二者并非彻底的竞争关系，你彻底能够用React去开发一个真正的Web Component；

• React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工做。

一、ReactJS的背景和原理

在Web开发中，咱们总须要将变化的数据实时反应到UI上，这时就须要对DOM进行操做。而复杂或频繁的DOM操做一般是性能瓶颈产生的缘由（如何进行高性能的复杂DOM操做一般是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时全部的DOM构造都是经过虚拟DOM进行，每当数据变化时，React都会从新构建整个DOM树，而后React将当前整个DOM树和上一次的DOM树进行对比，获得DOM结构的区别，而后仅仅将须要变化的部分进行实际的浏览器DOM更新。并且React可以批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，而后又从B变成A，React会认为UI不发生任何变化，而若是经过手动控制，这种逻辑一般是极其复杂的。尽管每一次都须要构造完整的虚拟DOM树，可是由于虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操做的仅仅是Diff部分，于是能达到提升性能的目的。这样，在保证性能的同时，开发者将再也不须要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只须要关心在任意一个数据状态下，整个界面是如何Render的。

若是你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要作的就是根据数据Render出HTML送到浏览器端。若是这时由于用户的一个点击须要改变某个状态文字，那么也是经过刷新整个页面来完成的。服务器端并不须要知道是哪一小段HTML发生了变化，而只须要根据数据刷新整个页面。换句话说，任何UI的变化都是经过总体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每作一点界面的更新，你均可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。

借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时，传统开发的思路如上图，你的开发过程须要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；而基于React的开发思路以下图，你永远只须要关心数据总体，两次数据之间的UI如何变化，则彻底交给框架去作。能够看到，使用React大大下降了逻辑复杂性，意味着开发难度下降，可能产生Bug的机会也更少。

二、组件化

虚拟DOM(virtual-dom)不只带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具备独立功能的UI部件。React推荐以组件的方式去从新思考UI构成，将UI上每个功能相对独立的模块定义成组件，而后将小的组件经过组合或者嵌套的方式构成大的组件，最终完成总体UI的构建。例如，Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件，你们有兴趣能够看下它背后的代码。

若是说MVC的思想让你作到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。咱们经过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

对于MVC开发模式来讲，开发者将三者定义成不一样的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。

对于React而言，则彻底是一个新的思路，开发者从功能的角度出发，将UI分红不一样的组件，每一个组件都独立封装。

在React中，你按照界面模块天然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个经过小组件构成的大组件，每一个组件只关心本身部分的逻辑，彼此独立。

React认为一个组件应该具备以下特征：

（1）可组合（Composeable）：一个组件易于和其它组件一块儿使用，或者嵌套在另外一个组件内部。若是一个组件内部建立了另外一个组件，那么说父组件拥有（own）它建立的子组件，经过这个特性，一个复杂的UI能够拆分红多个简单的UI组件；

（2）可重用（Reusable）：每一个组件都是具备独立功能的，它能够被使用在多个UI场景；

（3）可维护（Maintainable）：每一个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

 

总结：

1.React 是一个用于构建用户界面的 JAVASCRIPT 库。

2.React主要用于构建UI，不少人认为 React 是 MVC 中的 V（视图）。

3.React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

4.React 拥有较高的性能，代码逻辑很是简单，愈来愈多的人已开始关注和使用它。

特色：

• 1.声明式设计 −React采用声明范式，能够轻松描述应用。

• 2.高效 −React经过对DOM的模拟，最大限度地减小与DOM的交互。

• 3.灵活 −React能够与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不必定使用 JSX ，但咱们建议使用它。

• 5.组件 − 经过 React 构建组件，使得代码更加容易获得复用，可以很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减小了重复代码，这也是它为何比传统数据绑定更简单。