00:00
嗨,各位同学大家好,我是上硅谷的前端讲师张天宇,这次呢给大家带来的课程是react全家桶,大家注意到了,我们这儿呢用了一个比较有意思的词儿啊,叫全家桶,为什么要用这个词儿呢?简单给大家解释一下,因为在本课程当中,不仅要给大家讲解react基础啊,就这个最为核心的东西,我们也会讲解到一些其他库的使用,你比如说react router专门做路由的库,Pop subb消息管理的库,Redux专门做集中式状态管理的一个库,以及一个on design精美的UI组件库。正是因为啊,我们学的不是说某一个库,而是顺着react这个技术站向四外扩展,讲了很多的东西,那所以说我们就起了一个好听的名字呗,叫react全家桶。OK,在正式的学习这个react之前啊,我想带着同学们明确几个问题,首先第一个react是什么?
01:08
这里呢,截了个图,摘自官网,他对自己是这么下定义的,我们读一遍用于构建用户界面的JS库。我接下来把这两个字圈起来叫界面,为什么圈它呢?因为react只关注界面,或者你也可以换一个说法,不是页面,叫视图,哎,那这怎么理解呢?给大家说一个小例子吧,比如说有这么一个需求啊,同学们,在页面上我要展示一些学生的信息,你觉得用你之前所学的知识,你要怎么做呢?或者说分为几步呢?我也大概给大家写了一下,应该就三步啊,如果大概来说,第一步你是不是得发送请求获取这些学生的数据。
02:00
第二步呢,数据回来了之后,你未必就能直接使用,对吗?你得处理数据,那这里边就涉及到对数组的便利呀,过滤啊等等这些对吗?好,那然后咱再说第三步,那你看请求也请求了,数据也回来了,也加工完了,那接下来呢,那好像就用咱们熟悉的那些什么JS呀,对吧?什么j query啊,你去操作do啊,把东西放到页面里面的指定节点里面,哎,OK,是不是就展现了呀?同学,前两步react不管你react只管最后一步就是他帮你操作DOM呈现页面,说老师听你这意思,学了react,我就不用自己操作到了,对。但是前两步还得你自己做,你发送请求,那你用你之前学过的那些发送请求的方式,你就去发,说老师react没给我封装一下,就像这块那样,到了辅点adjust,然后就能发送adjust请求了,没有人家没封装这东西啊,然后咱再说第二个就是处理数据,说老师那react有没有给我封装一些,比如说高端一点的数组身上的方法呢,就不是原生的那几个啊,什么filter reduce啊等等这些没有没有封装。
03:15
那他只关注视图,只管页面的呈现,OK啊,那我们把官网的这个定义吧,给他稍微展开点来说,我们也可以这样给他下定义,就是react是一个将数据渲染为HTML视图的开源JS库。那你想吧,同学,我要给你渲染HTML视图,那我怎么渲染数据不能是我随机产生的吧,你得给我,哎,所以说你给我数据,我帮你渲染视图,这就是react的核心,好,那第一个问题呢,我们就搞定了,那接下来我们看第二个问题,谁开发的谁呢?可能有些小伙伴都知道了,是吧,在这儿呢,就不卖关子了,直接说是由国外的知名软件公司Facebook打造的,而且现在怎么呢,开源了,那在下边呢,我给大家呀列了一个时间点,大家大概去看一下啊,就是在最开始的时候呢,咱们所学的这个react呢,是由Facebook的一个软件工程师到Jordan去创建的啊,就是他刚开始他是在Facebook写了这么一个东西,那当然了,那时候的react和现在肯定没法比对吧啊,可能是一个雏形,然后2011年呢,Facebook呢。
04:34
觉得这个东西还可以尝试着在自家的news feed的一个页面上啊去使用这个news feed呢,就有点像咱们现在微博的那个,你打开第一个首屏的那个推荐,那就有点那种感觉的那个页面,然后随后在2012年呢,他部署到了自家的呃,Ins上,可能有些小伙伴用过这个对吧?嗯,一个国外的Facebook出的一个照片分享平台,嗯,然后再往下看,13年5月Facebook正式宣布了react开源,那随后啊,同学那就不断的发展过程当中,那很多呃历史的时刻啊就都产生了是吧,你比如说啊,仓库的点赞量过10万啊,达到现在的可能过了15万对吧,那我们就不进行一一的列举了,那最后呢,我们用一句话给他收个尾啊,那就是react近十年陈酿是吧,就如同一壶老酒一样。那到如今呢,正在。
05:34
被腾讯啊阿里啊,就这些一线大厂就广泛使用了,哎,那所以说呢,也成为了我们的一个必备技能啊好了,那么我们再看下一个问题啊,就是为什么要学,我学了它能给我带来哪些好处,对吧?那首先我们一个一个来啊同学首先看第一个小点。你之前自己用原生GS去操作DOM的时候比较繁琐,而且效率低。
06:04
那么我粘过来一段代码,大家看看这段代码咱们在学原声的时候没少写吧?document.get element by ID document.query select,满屏的document document,首先同学就从编码上来说,是不是就繁琐呢?哎,还有一个就是效率低,那这怎么体现呢?其实啊,同学你每一次操作盗墓浏览器都是要干活的。啊,都要给你绘图,都要给你排列的,对吗?你频繁的操作,那浏览器可能就频繁的帮你绘制绘制排列排列,浏览器也很累的啊,所以说你就直接这么操作呢,繁琐而且效率低,后边呢,我写了一个东西啊,大家看一下,我说你之前那种模式都是在用DOM的API在操作UI,你用心体会一下,这个同学举个例子啊,页面上有一个盒子,ID呢为APP,它原来啊是红色的,现在我想让你把这个盒子改成天蓝色,那你怎么改呢?你说老师我去改它的样式文件啊,那不不不不通过CSS,咱就通过GS,或者我这么说吧,同学,让他三秒钟之后变成另外一个颜色,你咋写?
07:23
那你肯定用最熟悉的套路嘛,你写了个定时器对吧,然后定时器呢,等了三秒钟啊,定时器到点了,回调里边干嘛呀,拿到这个节点点style去改样式对吗。哎,那你想一下同学,你是不是在用盗墓的API在操作UI啊。那可能有些同学说老师那不废话嘛,那之前不都是这种交互逻辑吗?对吗?我点style就能改样式等等那些是吧,我都能写,那你肯定就是到我们的API操作UI嘛,之前是这样的,但是逐渐的发现这种模式有点小问题是吧,那什么问题呢?我们再往下看,其实刚才我放上这段代码的时候,有些同学可能在心里啊,就反驳了我一下,老师你好像在套路我你故意写了一个原声特别长的那些老师我们都知道有一东西叫JA query。
08:16
那东西多简单呀,叨了福点是吧?来写一下叨了福,哎,点是吧,我有点出好多东西,那叨了福除了能点老师,那到了福还能小括号呢,那你看老师窄块也给我提供了非常优秀的这个选择器,对吧?能让我写的非常简短,不像你这这么长,你这不套路我吗?我用j query东西不就短了吗?同学,你用了JA query也仅仅是在编码上,你这个代码量啊,它少了,那效率低,它还是效率低,知道吧,因为你每一次去操作盗墓都会引起浏览器拼命的重绘,重排,就刚才说的排列啊,还有绘制,那么不断的绘制就是重绘,那不断的排列就是重排。
09:04
啊,说老师那用了这块也不行,是的,我们往下看第二条啊,就是你使用GS直接操作盗浏览器,你看刚才说的嘛,大量的重绘重排,所以说跟你用什么没关系,说老师我用原生GS,我用JA query,我用移动端所特有的那个zip to,你都能去操作盗墓,但是就咱说浏览器会进行大量的重绘重排,很不友好。说老师感觉重绘重排好像也不会很多吧,那是你数据量小,数据量大这事儿很可怕的,别急,一会儿咱有例子啊,再往下看,第三个就是原生GS啊,它没有组件化的编码方案,代码复用率是特别低的,可能这里边有一个新鲜的词汇,大家还没接触过,就是组件化,同学们,我说另外一个词你肯定知道叫模块化,诶,这东西你会吧?同学,咱原来是不是学过GS的模块化呀?那我想问一下什么叫GS的模块化呀?简言之,那就是把一个非常庞大的GS按照其功能点拆分成诶,一个一个一个小的GS。
10:22
那么比如说这个叫做a.GS同学,那我拆的好处在哪呢?这个a.JS里边可以写一些独立的业务逻辑对吗?别人以后也想用这个逻辑,a.GS1引入是不是就可以了?这就是你早期的模块化,那么组件化是什么意思呀?那大家想一下,构成页面的三驾马车不可缺少的是不是它的壳子,然后呢?诶,它的衣服,然后呢,它的交互对吗?如果您只知道模块化这东西,那同学好啊,你只是会拆GS。对吧,那结构怎么拆呢?那样式怎么拆呢。
11:03
对吧,大家想一下你页面上呢,哎,有一些固定的结构在这儿了,别人也要用,另外一个程序员还要用,有三个人都要用,那你之前怎么用的呀?老师,那我复制一份我给他,对吧,省着他自己写了,那叫复制不叫复用,那组件话其实就是一拆到底的感觉,不仅GS要拆。结构啊,还有样式都拆,甚至都不仅仅拆这三个,还拆什么呢?构成这个局部功能的图片呀,字体呀,音视频呢,那都得拆啊,那所以说这就是组件化,同学这儿呢,咱们就先简单理解一下啊,组件画明白了,老师就不仅仅是拆那个GS的交互,其他的东西也拆,哎,对,那到底怎么拆,如何定义一个组件,那是我们后续要单独讲解的东西在这,哎,大家就先体会一下即可,那同学我说了这三点,那你觉没觉得我并没有在这个里面给你说任何react的优点。
12:04
而是我说了很多原生GS里的痛点,对吗?其实学习一个东西啊,同学们,我们可以用很多的角度去理解啊,你就比如说举个例子啊,我可以说他很多的优点,哎,来吧,我们开始学,那还有一种方式,就是说我不学你会面临哪些痛点,那如果我学了这个东西,能把这个痛点解决,那这不是最棒的吗?啊,所以说我们整个这个人类的发展过程当中,是不是也是啊,你看遇到痛点了,说觉得,哎出行太慢了,所以说有了高铁对吧?哎,行了,这儿呢,咱就不浪费过多的时间了。好了,我们再看下一个问题,就是react的特点。啊,你说了原生有那么多的痛点,那react同学你猜是不是最最基本的,他应该把我之前那几个痛点解决呀?啊,我学了react还有那几个痛点,那为什么还要学它呢?对吧?诶,那我们看一下react的特点来吧,首先看第一个,刚才说原生GS没有组件化的编码,那么react有了,啊,这个组件化呢和组件呢,后期咱会有单独的章节详细的去讲解啊,那这里面我说一个词儿叫声明式编码,什么意思呀?哎,就简单说同学之前呀,你那都叫命令式编码,什么意思呢?简单说一下,页面上有一个盒子。
13:32
哎,它是红色的,现在我的要求是把它变成蓝色的,你之前是这样做的,通过GS或者JA query拿到红色的盒子,点style去改它的样式,那这就是属于命令式编码,你少一步都不行,你不拿红色的盒子,你手里边没节点,你拿到了,你不改它颜色不变,那这都属于命令式编程。那么声明式呢,哎,就有所不同了,你通过一些特殊的语法,你只是表达一下你应该是蓝色的,然后react就去帮你操作DOM了,就把它改成蓝色的了,哎,就是这么回事。所以说生活中的例子呢,你就比如说如果我渴了,正好呢,同学你也在教室,然后我这样指挥你,我说同学你站起来往右走三步,你蹲下来,然后往左看看,没看到凳子上有一个杯子啊,拿起它,站起来向我走,拧开,我要喝,这就是命令式编程,我少做任何一步,我都喝不。
14:32
倒这个水,那么声明式编码呢,就有意思了,同学,那你想这么一个场景啊,然后我看着你,我说哎呀,嗓子有点干,那这个时候你主动的就站起来了,拿着杯子向我走来,拧们看老师喝吧,这就是生命,是编码,你不用什么事都亲力亲为,对吗?那你可能说,哎,老师挺爽的,声明式编码不错呀,还行。哎,那我跟你说一下,同学你说就拿生活中的例子来说,咱俩是不是得达到一个心有灵犀的感觉,我看你一眼,然后我咳嗽一下,我说嗓子有点干,你是不是得领会我这个意思,你才能把水给我递过来呀,所以说声明式编码虽爽,但是你也得学习一下它,那语法怎么写,对吧?哎,正是因为有了组件化和声明式编码,所以说react呢,提高了开发的效率,以及呢,组件的复用率啊,就有有了组件嘛,对吧,我可以用你也可以用啊,拿过去直接就用好,那我们。
15:32
我们看第二个就是在react native中呢,可以使用react语法进行移动端开发。说老师react native是什么呢?如果咱们同学把react这门课程呢,好好学完之后呢,你可以再学习一个react native这个课程,这个react native呢,是专门让前端人员通过GS去编写安卓和iOS应用的这么一门技术。
16:01
是的,同学你没听错,就用你所熟悉的GS去编写出一个安卓应用,还有iOS应用,说老师没记错的话,那编写Android不得用Java吗?是吧?那编写这个iOS不得用OC吗?对吧?OC吗?啊,或者是这个Swift吗?那这是说开发手机客户端的一个正常的流程吧,我得学这些语言啊,那如果您学了react native没事儿,只懂JS也能做移动端开发。哎,所以说你看这就厉害了啊OK,说老师那我想学学,诶别急,同学先把react学好,好了我们再看第三个啊第三个。这是一个特别重要的点,所以说我们把它放在了最后,让它压轴出来。react使用了虚拟盗墓技术,而且编写了非常优秀的盗墓的低频算法,尽量减少与真实盗M的交互。其实刚才咱说的不知道大家还记不记得了,说你用原生的GS或者是哎,你用j query,你去操作的时候,你都是直接跟真实盗墓进行对话,你敢点style.background color给它改成蓝色,那它马上就变成蓝色,你是直接跟页面上的真实盗墓进行交互,那react提出来一个概念叫虚拟盗墓。
17:32
哎说老师,那这怎么理解呢?虚拟do,虚拟do不是页面上的真实do,而是react操作的一个do,专门给react用的,没放在页面上,放在哪呢?代码运行的时候你电脑的内存里,哎说老师,那这个D频算法有什么用呢?一会儿用图去展示,好吧,同学,第三点咱想说明白得借助两个图,首先我们来看一下这个,这是呢,我用原生GS写的一个,那把一些人呢展示到页面上。
18:08
同学别急,我们大概看看这段代码啊,首先这呢,我定义好了一个容器,给了他一个ID,哎,我换一个画笔的颜色吧,啊在这好,然后怎么办呀,我模拟了一些人的数据,同学,这个数据当然是我写死的了,你说如果是真实开发从哪来呀?是不是从服务器那边获取啊,好,然后呢,诶,我定义了一个HTMLSTR,诶,一个空串,然后我就开始进行最传统的一个便利,拿到的每一个人,然后呢,哎,用了ES6这个新语法模板字符串,然后呢,拿到了人的名字,人的年龄,那最后呢,拼成了一个哎,有内容的HTML字符串,最终进行了一步,就是这一步至关重要的一步,同学干嘛呢?是不是您自己用GS在操作do呀,你看你的点in atml啊说老师那然后页面就有东西了呗,是的,哎,是吧,我这特意选了这么几个哈,有没有你的爱豆呢?啊,一个鹿晗李现是吧?好说老师这有什么可说的吗?这很正常的一个吧,我还能看得懂,而且分分钟我就能写出来,对吗?同学说的不是页面初次展示,我问一下同学,如果你这个人啊,只有两个,这个人以后没有任何的更新,不会多一个,也不会少一个,同学,那我跟你讲啊,那我劝你,你连框架也别用了,咱就直接写死他就得了呗,甚至你连便利也别用了,对吧,因为是死数据嘛,但是吧,话说回来了,同学,现在各大网页哪个不是动态的呀,哪个不是数据后期得不断的更新和维护的呀,所以说你考虑这么一个问题,同学现在多了一个人。
19:55
我现在确实是啊,这个数据呢,是写死的,就两个,就假设这块是发送网络请求回来的,那我就问大家,现在多了一个人,几个人了,是不是三个呀?啊,那你举个例子,有鹿晗,有李现,那比如说再来一个吧,啊最近这个流量比较火的是吧,肖战是吧?哎,比如说又出现一个人,那同学那你想吧,你是不是拿着一堆的数据又开始变历了一个大的HTL字符串,然后怎么办?哎,又来了一次因ner HTML,然后等于这个,那同学我想问你一下,原来页面上是不是已经有了两个倒一个是鹿晗18离线19对吗?那你刚才是不是多了一个人呢?那你多了一个人,同学,那你考虑一个问题吧。
20:39
原来页面上的真实盗墓就被你所写的蓝色盒子里的这句话全都给剃掉了,其实人家原来也有鹿晗18、李现19,但是你这不是新加工了一个吗?你这不是自己往里边放吗?原来的鹿晗18,李现19没一个能复用的。啊,也就是说原来有两个人啊,那我又多了一个人呢,那三个人,那原来那两个人怎么办啊,那也得是哎,弄来一个盗墓,然后把原来那个替换掉,所以说这个效率就很低,因为没有一个复用的动作,所以说用图来展示呢,我给大家写了这么一个图,那你看一下啊,同学们一些人的数据,几个人两个,那由于你写了操作真实盗墓,直接对应页面上几个真实盗墓吧,咱不说真实盗墓了,就说盗对吧,几个两个,那我多了一个人呢,那就多一个,但是你要知道的是,你刚才那个代码是你自己在操作道哟,所以说表面上这展示了三个人,那原来这儿呢,有两个人,那这两个人。
21:41
都没有利用上,又是拿着新的数据,然后弄出来的真实盗墓A一下子就放上去,那同学简单点说,原来有100个人,现在有101个,那你自己操作盗墓的代价就是原来那100个没一个能用得上的。拿着101个数据,又开始弄出一堆DOM了,然后放上去,对吗?啊,那这就是用纯GS去实现,那react如何操作呢?我给大家又画了一个图,大家还记得吧,刚才我说了一个东西叫虚拟盗模,OK,好了,React是这么做的,同学你注意看一下数据呢,还是刚才那些数据,几个人呢?俩人俩人啊,俩人,然后这两个人react拿到数据之后,并没有直接去给你动真实的道,他是把这两个人的数据对应成了两个人的虚拟道目,同学你看不见也摸不到,因为他在内存里呢。好,随后他把这两个虚拟盗墓,哎,给你映射成页面上的真实盗墓,鹿晗18,李线19。
22:46
说老师,那这我感觉比刚才多了一个环节呀,你这个嗨,刚才俩环节,你这多了一个环节,你中间的环节再快他也浪费时间啊是吗?哎,那同学说一下,优势不是在第一次体现出来的,而是后期数据发生变化的时候,好我们看最后一行,若有天啊,数据发生变化了,哎鹿晗李现又多了一个人,哎说肖战。
23:11
同学,那我想问一下,数据是不是多了一个OK react的,这个时候还是把第一条数据生成一个虚拟盗墓,第二个生成一条,第三个生成一条,说老师那不还是把这三个虚拟盗目都放在页面上,然后对应成三个真实盗墓吗?同学,要是这样的话,那咱就不用学react了。关键点来了,同学,刚才有几个虚拟到没呀,两个,现在有几个虚拟到没呀,三个。React并没有把刚才那个虚拟盗墓丢弃,而是存下来了,那你看原来是不是有两个虚拟盗墓,对现在有几个呢?三个,它开始进行虚拟盗墓的比较。我再说一遍,他开始进行虚拟盗墓的比较,他发现之前一一对应的那个虚拟盗墓长这样,那么后来一一对应的那个虚拟盗墓,哎,也长这样,它俩是一样的,都是鹿晗18岁,那既然这样的话。
24:12
我也就不再给你生成新的真实盗墓了,什么意思呢?你之前有两个虚拟盗墓,经过对比发现新生成的虚拟盗墓和之前的是一样的,那么随后他就拿着页面上的真实盗墓鹿晗18离线19直接在这儿就用起来了,而他真正生成的那个新的真实盗墓,其实只是肖战20这条数据,那同学你想当数据量大的时候,是不是优势就体现出来了呢?那所以说react操作东西的特点就是原来有100条,现在有多少条啊,101条OK啊。我为你渲染的其实只是101那个一说老师之前那100条呢,之前渲染完了,在页面上呢,真实盗墓拿过来直接用,那所以说这就是react的一个高效的原因,OK好了,那我们在这儿呢,也只是说大概跟大家形容一下,那在后续的课程当中呢,我们也会给大家仔细的聊一聊他这个DOM的这个,诶对比的这个算法的原理好了。
25:16
啊,那我们进入最后一个问题,同学们,就是学习react之前你要掌握的GS基础知识,同学react这门技术呢,对你之前的知识啊要求比较高,你必须得把如下这些知识呢得过一过,才能跟着咱们一起去玩耍react。首先第一个学会判断this的指向,第二个你得对这个类这个概念有一定的了解啊,让你写一个类啊,实例啊,继承啊啊,这些得会,还有就是ES6的语法规范,你得会箭头函数啊,模板字符串啊,结构赋值啊等等这些,还有第三个,那就是NPM包管理器,因为我们会用到relax脚手架,肯定得涉及到用NPM去下载东西,对吗?然后还有什么呢?圆形与圆形链啊,当咱们在讲解类上的方法的时候,肯定得用到这个嘛。还有就是数组的一些常用方法,比如说统计数组啊,变例数组啊,过滤数组啊,对不对,条件筛选呢,条件求和啊。
26:17
筛选最值啊,那这些你都得会是吧?哎,然后还有就是对之前的GS的模块化知识你也得有所了解啊,可能啊看到这有些小伙伴说老师算了,打扰了react,从此我和他是路人啊,也不要这样同学,就是即便这里的东西啊,如果哪些呢,大家忘了,我在讲课的时候,你比如说需要用到类这个概念的时候,也会大概的呀,带着大家呢回顾一下啊,那可能速度呢会稍微快一点,因为我们毕竟不能占用大篇幅呢去讲解这些,所以说也建议各位看视频的小伙伴呢,在看本视频之前啊,你把这些知识呢,自己好好的过一过好吗?嗯,行,那我们这个视频呢,是简单对react做一个简介,哎,那我们这一小节呢,就到这里。
我来说两句