黑马程序员技术交流社区

标题: 【视频教程】ReactJs精品教程 [打印本页]
作者: 播妞    时间: 2018-5-29 13:46
标题: 【视频教程】ReactJs精品教程
现在最热门的前端框架有AngularJS、React、Bootstrap等。而播妞本次分享的则是【ReactJs精品教程】，不少坛友都有感触，自从接触了ReactJS，就被ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深吸引了，下面来跟播妞一起领略ReactJs的风采吧~~
一、ReactJS简介
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

二、对ReactJS的认识及ReactJS的优点
首先，对于React，有一些认识误区，这里先总结一下：
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；
React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；
有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；
React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。
1、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的机会也更少。
部分介绍
网盘资料：

资料下载（网盘链接已添加，回帖可见）
作者: mvpicy    时间: 2018-6-2 20:49
学习学习
作者: 韩之庆    时间: 2018-6-3 08:45
谢谢分享
作者: 韩之庆    时间: 2018-6-3 08:46
第三天以后的视频什么时候发呀？
作者: koouu    时间: 2018-6-3 12:22
66666666666666
作者: udestiny    时间: 2018-6-9 11:21
我想学习这个
作者: 欧买高    时间: 2018-6-12 08:09
认真学习下
作者: chenglidian    时间: 2018-6-12 09:37
学习学习
作者: ps139320    时间: 2018-6-12 21:58
66666666666666666666666666666666666666666
作者: a_code2017    时间: 2018-6-18 10:14
学习 学习
作者: 1621829284    时间: 2018-6-18 14:05
wqeqwesadasdaasdada
作者: Recept    时间: 2018-6-25 11:20
感谢分享！
作者: 土鸡同学    时间: 2018-6-25 21:24
好好好，谢谢老师
作者: cnloop    时间: 2018-6-26 19:36
谢谢分享
作者: 2048    时间: 2018-6-28 08:58
ReactJS下载
作者: feiloutudouj    时间: 2018-6-29 09:51
不错的教程,这正是我需要的
作者: 沫问    时间: 2018-7-9 13:23
hwa2hwa2hwa2
作者: 巫名州    时间: 2018-7-9 14:10
谢谢分享
作者: 小李子888    时间: 2018-7-10 10:59
vary good thinks
作者: Damon_z    时间: 2018-7-10 17:43
最近在学校react js，感觉视频会有帮助
作者: voanit    时间: 2018-7-12 20:54
温热无若
作者: 小小的    时间: 2018-7-13 23:22
话说资源呢
作者: cmlove083    时间: 2018-7-16 01:20
来学习一下react
作者: cmlove083    时间: 2018-7-16 01:22
请问下第三天之后的有吗
作者: yangbao    时间: 2018-7-16 11:29
666666666666666666
作者: bjgbs    时间: 2018-7-16 16:39
6666666666666666666666
作者: 感谢有您    时间: 2018-8-4 05:14
我看不懂怎么
作者: aaxjl123    时间: 2018-8-9 14:55
谢谢谢谢分享
作者: gbzhu    时间: 2018-8-10 10:23
haohaohaoahoahao
作者: wr2576786    时间: 2018-8-12 14:31
决定是否立刻收到付款了飞机螺丝钉将联手对抗飞机上的发
作者: 石头a    时间: 2018-8-12 18:59
等会让沟通和任何业绩合同
作者: misfithe    时间: 2018-8-12 19:57
学习学习
作者: Svipmanong    时间: 2018-8-13 17:00
谢谢
作者: shishen1456    时间: 2018-8-13 19:38
正在学习前端知识，收集资料中
作者: Van君    时间: 2018-8-14 23:00
111111111111111111111111111111111111111
作者: javajasonjava    时间: 2018-8-18 07:53
谢谢分享
作者: wuzhi123    时间: 2018-8-20 13:43
作者: z06541    时间: 2018-8-20 22:22
666666666666666
作者: JojoSun    时间: 2018-8-21 15:38
666666666666666666666
作者: lukiya    时间: 2018-8-23 20:14
作者: elephantfen    时间: 2018-8-30 11:58
88888888888888888888
作者: ⊕↘學無止境    时间: 2018-8-31 21:10
早不反对反对发单飞
作者: 天子笑牵牛    时间: 2018-9-2 14:09
谢谢啦
作者: 象牙山刘能    时间: 2018-9-2 15:27
红红火火恍恍惚惚和
作者: webfront    时间: 2018-9-4 19:32
支持支持
作者: 霸皇VS暴君    时间: 2018-9-9 16:46
好好好好好好好好好好好好好好好好好好
作者: 未来的悍马    时间: 2018-9-9 20:02
66666666666666777777777
作者: Ekko_liu    时间: 2018-9-9 21:28
请问播妞，这个讲师是谁呢？还能在哪里哪里看到他的其他视频呢？
作者: 南笙、浩    时间: 2018-9-10 17:52
111111111111111
作者: 深深深深    时间: 2018-9-11 20:08
学习学习
作者: zz553603476    时间: 2018-9-14 18:27
谢谢分享。
作者: quanzhilong    时间: 2018-9-17 22:39
dsdssddsfafsfsfssa
作者: yphuang    时间: 2018-9-18 14:11
好东西  干货！
作者: hsliufei    时间: 2018-9-19 10:39
悄没声得拿走……
作者: konglingchen201    时间: 2018-9-24 07:47
96666666666666
作者: dxjfyx@126.com    时间: 2018-9-24 18:53
支持一下
作者: 124100931    时间: 2018-9-25 11:38
学习学习
作者: 加油XXX    时间: 2018-9-26 08:52
不错，希望了可以和大家一起学习前端知识。
作者: fateso    时间: 2018-9-26 14:56
感谢感谢
作者: 小孩123    时间: 2018-9-30 16:22
虚心求教
作者: VanJeson    时间: 2018-10-3 19:19
谢谢分享
作者: yang31    时间: 2018-10-5 22:42
最近在学习react，谢谢分享
作者: 卧槽666    时间: 2018-10-10 21:59
项目上正好要用到，学习一下
作者: 卧槽666    时间: 2018-10-10 22:02
需要源码
作者: hanbingbing    时间: 2018-10-13 00:54
棒棒棒棒的棒棒的
作者: yt_dmx    时间: 2018-10-20 01:43
要要要要要要要要要要要要要要要要
作者: xiaozhangBeyond    时间: 2018-10-20 11:43
作者: 崔彦博    时间: 2018-10-25 17:52
                          看看
作者: 番茄炒鸡蛋    时间: 2018-10-25 19:41
学习一下
作者: yt_dmx    时间: 2018-10-27 07:53
有有有有有有有有有有有有有有有有有有有
作者: 墨上    时间: 2018-10-28 21:03
有意思，先看看
作者: 阿斯顿91    时间: 2018-10-29 14:29
学习学习
作者: 大抗浪鱼    时间: 2018-10-30 22:58
资料资料,奋斗
作者: 小蜜蜂1    时间: 2018-10-31 11:14
很有用，值得学习，感谢楼主分享
作者: xijian    时间: 2018-11-1 14:24
作者: xiaoxiaoxiaoyu    时间: 2018-11-6 22:38
感谢分享！
作者: 从心出发    时间: 2018-11-7 19:07
，朋友遇到问题，希望这个视频能帮助她接触前端问题
作者: sgz05424    时间: 2018-11-8 00:12
6666
作者: chaping    时间: 2018-11-8 08:56
开心开心开心!!!!!!!
作者: 梦魇劫烬    时间: 2018-11-8 18:57
cddddddddd
作者: 82449766    时间: 2018-11-12 16:17
学习学习
作者: 老码农    时间: 2018-11-18 04:40
谢谢分享
作者: 老码农    时间: 2018-11-18 04:44
没有资料啊
作者: 早安要晚安    时间: 2018-11-18 16:54
不会的你到哪发你的
作者: fly_xfa    时间: 2018-11-18 19:12
如果调试一个程序让你很苦恼，千万不要放弃，成功永远在拐角之后，除非你走到拐角，否则你永远不知道你离他多近，所以，请记住，坚持不懈，直到成功。
作者: CCLOCALHOST    时间: 2018-11-18 22:03
想要很棒很棒很棒
作者: 小鱼huahua    时间: 2018-11-18 23:20
ukyfkkkkkkkkkkkk
作者: 小鱼huahua    时间: 2018-11-18 23:21
h99999ppppppppppppppppppp
作者: wxh@it    时间: 2018-11-19 16:04
内容很棒的
作者: albenlee    时间: 2018-11-19 17:45
感谢楼主的分享
作者: Mr_Brown_bear    时间: 2018-11-27 11:16
谢谢分享
作者: luochao123    时间: 2018-11-27 17:23
默默看看看
作者: 爱蹦迪的小乌龟    时间: 2018-11-28 08:47
优秀   333366666666666666
作者: 李瑛    时间: 2018-12-3 18:08
看起来不错看看
作者: qq20172    时间: 2018-12-7 13:42
播妞最可爱
作者: Xion    时间: 2018-12-7 16:47
谢谢分享精通教程
作者: yellow_H    时间: 2018-12-10 15:59
学习使我快乐
作者: 何坪阳-1    时间: 2018-12-11 14:18
谢谢大佬分享
作者: justin-wxg    时间: 2018-12-12 18:34
哈哈哈哈哈哈哈哈哈哈哈哈
作者: 赵莫宁    时间: 2018-12-13 09:13
学习一下




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2