01《黑马程序员视频——React》基础概念
编程语言
2018-07-25 16:09:58
阅读次数: 0
两个概念
- library(库):小而巧,只提供特定的API;jQuery,库之间的切换比较方便,代码几乎不会改变
- Farmework(框架):大而全,提供了一整套的解决方案,vue,项目框架不易切换
前端三大主流框架
- Angular.js
- Vue.js
- React,js
React与Vue的对比
组件化方面
- 什么是模块化:从
代码
角度;将可复用的功能代码抽离为单个模块;便于项目的维护和开发;例如:node.js
- 什么是组件化:从
UI
角度;将可复用的UI元素,抽离为单个组件;便于项目开发和维护;例如:react和vue;组件包含三个要素:结构(HTML)、行为(JavaScript)、样式(css)
- Vue是如何实现组件化的:通过
.vue
文件,来创建对应组件;该文件包含三个部分:
- template 结构
- script 行为
- style 样式
- React如何实现组件化:一切都以
js
来表现的,语法遵循ES6
、ES7(async、await)
标准
开发团队
- Vue.js:第一版,主要由 尤雨溪 专门进行维护;2.x 后,由 尤雨溪为主的开源团队
- React.js:由Facebook前端官方团队进行维护和更新
社区
- Vue最近两年才流行起来,社区相对较小,有一些坑没人踩过
- React诞生较早,社区强大,常见问题、坑、最优解决方案、文档、博客在社区里面比较丰富
移动App开发体验
- Vue,结合Weex这门技术,提供了迁移到移动端App开发的体验。(Weex,比较初级,没有很成功的大案例)
- React,结合ReactNative,提供了无缝迁移到移动APP的开发体验(RN用的对多)。
为什么要学习React
- 和Angular1相比,React设计很优秀,一切基于JS并且实现了组件化的思想
- 开发团队实例强悍,不必担心断更的情况
- 社区强大,很多问题都可以找到对应的解决方案
- 提供了无缝转到ReactNative上的开发体验
- 很多企业中,前端项目的技术选型采用React.js
React中的核心概念
虚拟DOM(Virtual Document Objec Model)
- DOM的本质是什么:浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API
- 什么事React中的虚拟DOM:是框架中的概念,是程序员用JS对象来模拟页面上的DOM和DOM嵌套
- 为什么要实现虚拟DOM:为了实现页面中,DOM元素的高效更新
- DOM和虚拟DOM的区别:
在做table表格排序功能时,如果只是第一行和第二行交换,其他行无序改变。
浏览器未提供DOM树的API,因为无法拿到浏览器内存中的DOM树,排序时会将整个table重新渲染;
使用虚拟DOM,通过diff算法,可以按需渲染,只重新渲染改变的行。
diff算法
- tree diff:新旧两颗DOM树,逐层进行对比的过程,就是tree diff,当整颗DOM对比完毕,则所有需要被按需更新的元素必然可以找到
- component diff:在进行tree diff,每一层中组件级别的对比,叫做Component Diff;
- 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
- 如果对比前后,组件类型不同,则需要移除旧组件,常见新组件,并追加到页面上;
- element diff:在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这就是Element Diff
转载自blog.csdn.net/qq_29150765/article/details/81185493