React.js-Part1
总述
- 介绍、React核心概念、webpack4.x、JSX语法、创建组件(2种方式)
- 理解React中虚拟DOM的概念
- 理解React中三种Diff算法的概念
- 使用JS中createElement的方式创建虚拟DOM
- 使用ReactDOM.render方法
- 使用JSX语法并理解其本质
1.介绍
- React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram(照片交友) 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
- Angular1 2009 年 谷歌 MVC 不支持 组件化开发
- 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
- 搞清楚两个概念:
- library(库):小而巧的库,Jquery,优点:船小好调头,可以很方便的从一个库切换到另外的库,但是代码几乎不会改变。
- Framework(框架):大而全的是框架,提供了一整套的解决方案,所以项目中间想切换到另外的框架,比较困难。
2.前端三大主流框架
三大框架一大抄
- Angular.js:出来最早的前端框架,学习曲线比较陡,NG1学习起来比较麻烦,NG2-NG5开始进行了了改革,也提供了组件化开发的概念,也支持TS(TypeScript)进行编辑。
- Vue.js:最火(关注的人比较多),中国人开发的。
- React.js:最流行(用的人比较多),设计很优秀。
3.React与Vue对比
组件化方面
- 什么是模块化:是从代码角度进行分析的;把一些可以复用的代码,抽离为单个的模块;便于项目的维护和开发。
- 什么是组件化:是从 Ul界面的角度进行分析的;把一些可复用的Ul元素,抽离为单独的组件(放到单独的文件中);便于项目的维护和开发。
- **组件化的好处:**随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件拼接为一个完整的页面。
- Vue是如何实现组件化:通过.vue文件,来创建对应的组件;
- template 结构
- script 行为
- style 样式
- React如何使用组件化:React中有组件化的概念,但没有像Vue这样的模板文件;React中一切都是以js来实现的;所以JS要合格;ES6,ES7(async和await)要会用。
开发团队方面
- React有FaceBook前端官方团队进行维护和更新,技术实力比较雄厚。
- Vue 第一版,由尤雨溪专门维护,2.x版本 由尤雨溪 为主的开源团队进行开发和维护。
社区方面
- React诞生较早,所以社区比较强大,一些常见问题、坑、最优解决方案,文档、博客在社区中都可以方便的找到。
- Vue是近两年才火起来,社区相对较小。
移动APP开发体验方面
- React,结合ReactNative,也无缝迁移到移动APP的开发体验(RN用的最多,也是最火最流行的,ins,facebook)。
- Vue,结合Weex,提供了迁移到移动端APP开发的体验(Weex,阿里开发的,目前只是一个小玩具,并没有很成功的大案例)。
4.为什么学习React?
- 和Angualar1相比,React设计很优秀,一切基于JS并且实现了组件化开发的思想。
- 开发团队实力强悍,不必担心断更的情况。
- 社区和强大,很多问题都能找到对应的解决发那个。
- 提供了无缝转到ReactNative上的开发体验,让我们的技术能力得到了拓展;增强了核心竞争力。、
- 很多企业中,前端项目的技术选型采用的是React.js。
5.React中几个核心的概念(50%)
5.1虚拟DOM(Virtual Document Object Model)
- DOM的本质是什么:浏览器中的概念,浏览器提供的API,用JS对象来表示页面上的元素,并提供了操作DOM对象的API(拿到div,加上颜色);
- **什么是React中的虚拟DOM:**是框架中的概念,是程序员(封装框架的程序员)用JS对象来模拟页面上的DOM和DOM嵌套;
- 为什么要实现虚拟DOM:为了实现页面中,DOM元素的高效更新。
- DOM和虚拟DOM的区别:
- **DOM:**浏览器中提供的概念,用JS对象,表示页面上的元素,并提供了操作元素的API。
- **虚拟DOM:**是框架中的概念;开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系。
- 本质:用JS对象,来模拟DOM元素和嵌套关系。(面试)
- 目的:就是为了实现页面元素的高效更新。(面试)
需求:点击列表表头,实现对应表格数据的排序
-
表格中数据从哪儿来:从数据库查询来的。
-
查询到的数据,存放到哪儿了:数据在浏览器的内存中存放,而且是以对象数组的形式表示。
-
这些数据如何渲染到页面上?
- 方案1:手动for循环整个数组,then 手动拼接
str += ‘<tr></tr>’
- 方案2:使用模板引擎,art.template(???)
- 方案1:手动for循环整个数组,then 手动拼接
-
思考上述方法的性能上的问题?【↓】
-
如果用户点击了【时间】,想按照时间从大到小排序:
- 触发点击事件,在事件中,把内存中 对象数组,重新排序;
- 当排完序后,页面是旧的,但内存中的 对象数组 是新的;
- 想办法把最新的数组,重新渲染到页面上;(这一步有没有性能上的问题?)
-
分析和总结:上述方案,只是实现了把数据渲染的页面上的能力,但没把性能做到最优;
-
如何才能把性能做到最优:按需渲染页面(只重新渲染更新的数据对应的页面元素)。
-
如何实现按需渲染 更新?
获取内存中,新旧两个DOM树,进行对比,得到需要被按需更新的DOM元素。
DOM树概念
一个网页的呈现过程:
- 浏览器请求服务器获取页面HTML代码。
- 浏览器要在内存中,解析DOM结构,并在浏览器内存中,渲染出一颗DOM树。
- 浏览器把DOM树呈现到页面上。
-
如何获取新旧DOM树,从而实现DOM树的对比?
分析:浏览器中,并没有直接提供获取DOM树的API;所以,我们无法拿到浏览器内存中的DOM树。
-
程序员可以手动模拟新旧两棵DOM树。
-
程序员如何手动模拟DOM树?如何模拟一个DOM元素。JS对象模拟DOM树。
<div id="mydiv" title="dd">
content
<p>ddd</p>
</div>
var div = {
tagName:'div',
attrs:{
id