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技术,这个也是吸引人的关键特性之一。
React笔记_(1)_react概述的更多相关文章
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- React笔记_(7)_react路由
路由 路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程. 路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联. 那么react的路由到底指的是什么呢? 举个 ...
- React笔记_(6)_react语法5
react的版本 目前主要的react有 ES5,ES6.也有ES5和ES6混合编写的.比较混乱. react官方提倡用ES6. 说到这里,就需要提到一个概念--mixin mixin在es6中被摒弃 ...
- React笔记_(5)_react语法4
ajax 数据应用场景 在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间. 正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等 ...
- React笔记_(4)_react语法3
生命周期 很多语言中都讲了关于生命周期.这可是决定生命的周始,有没有存在感的关键啊. 生命周期,有生有死,有始有终,因果轮回,循环往复.(说多了) react中,主要说明的是 一个组件的生命周期.简单 ...
- React笔记_(2)_react语法1
这一节内容主要以了解为主. 渐渐的体会react的语法和其特性. ① htmlAndJs 混合编写 react和以往的前后台书写方式不一样. 在之前的多个语言中,讲求的是将页面代码和js代码逻辑分开, ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- IOS学习笔记02---语言发展概述,计算机语言简介.
IOS学习笔记02---语言发展概述,计算机语言简介. ------------------------------------------------------------------------ ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制
在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...
随机推荐
- saltstack之(五)数据系统Grains和Pillar
一.grains 1.什么是grainsgrains:存储minion端的信息,包括一些网络.硬件等信息,保存在minion端.一般为静态信息,非经常变化的数据. 2.grains的使用:获取mini ...
- iptables调试方法
iptables调试时,使用到raw表.ipt_LOG内核模块.日志记录在kern.log中. 具体的步骤如下: 1.准备ipt_LOG内核模块 modprobe ipt_LOG 2.使用raw表,加 ...
- python 模块zlib 压缩与解压
例子1:压缩与解压字符串 import zlib message = 'abcd1234' compressed = zlib.compress(message) decompressed = zli ...
- PLSQL 申明和游标
--从键盘输入一个数 accept b prompt '请输入一个大于零的数字'; declare anum number := &b; begin loop dbms_output.put_ ...
- Google 推出的 Java 编码规范(转)
原文地址:http://www.dahuatu.com/1225/988516.html 原文地址:http://www.dahuatu.com/1225/988516.html 原文地址:http: ...
- C++向量(Vector)
向量Vector: 向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为容器. 与string相同, vector 同属于STL(Standard Template L ...
- [reprint]如何编写引导程序 Hello World
在存储介质(硬盘.软盘.光盘)中有一块特殊的区域,叫做引导区.在计算机启动后,BIOS会读取引导区内的代码到内存中去,然后将执行这些代码.引导区的位置和大小与计算机的平台有关,对于IBM-PC兼容机, ...
- [原创]java WEB学习笔记78:Hibernate学习之路---session概述,session缓存(hibernate 一级缓存),数据库的隔离级别,在 MySql 中设置隔离级别,在 Hibernate 中设置隔离级别
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- android中的命令安装与卸载
软件的安装: adb install apk的保存地址 卸载软件: adb uninstall package名
- Android studio删除工程项目,androidstudio
本新手最近学Android都是用的eclipse.其实个人觉得eclipse不错,可能接触Android不久,倒也不觉得它慢还是怎样.对于Google的Android studio也是早有耳闻,前两天 ...