React笔记_(1)_react概述

React概述

 

React是一种很好的前端技术。

它将应用打散成独立的小模块，而后进行组装，完成开发。

react远比angularjs难学的多。

react依赖的如webpack等各类工具得先学会使用，而后还重点了解和使用es6，而后才能进入其核心。

 

关于react的更多内容请参照如下内容和react的官方文档。

 

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

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

Github地址：https://github.com/facebook/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分为web版和native版两块，前者好学，后者涉及到客户端打包和调用资源等一些技术，因此还有额外的学习成本。
不过，这个终究是个好东西，并且已是前端领域的标配。

不少公司原生移动开发也开始使用react native，由于使用它开发快，复用性高，并且作出来的东西跟原生差距较小， 节省了好多的人力物力成本，从而受到企业主们的青睐。对于react的介绍我再说一点，就是react不直接与html的dom打交道，而是使用虚拟dom。html跟虚拟dom差距不大，但在执行效率方面相差甚远，因此咱们要高效迅速渲染出页面就要使用这种虚拟dom技术，这个也是吸引人的关键特性之一。