1,什么是React?
(1)传统的构建用户界面方式?
- a,发送请求获取数据
- b,处理数据(过滤,整理格式等)
- c,操作DOM呈现(react代替部分)
(2)结论React是什么?
React是将数据渲染为HTML视图的开源JavaScript库。
(3)谁开源的?
2,传统JavaScript中使用DOM的痛点在哪?
(1)原生的JavaScript操作DOM繁琐,效率低(DOM-API操作UI)
(2)使用JavaScript操作DOM,浏览器会进行大量的重绘重排(资源耗损失大,渲染效率低)
(3)原生态JavaScript没有组件化编码方案,代码复用率低
我们知道作为一种轻量级的语言,JavaScript当然可以像分类那样进行一个交互编写了,但是HTML和css怎么拆分?
3 ,React的优点在哪?
(1)采用组件化模式,声明式编码,提高开发效率和组件复用率
a,组件化模式:
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。
参考文章:官网:组件 & Propsl
b,声明式编码:
声明式(declarative)是结果导向的,命令式(imperative)是过程导向的。它们都有自己适用的场景和局限。
参考文章:声明式(declarative) vs 命令式(imperative)
(2)在React Nativity中可以使用React语法进行移动端开发。
(3)使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互
a,原生JavaScript实现真实DOM操作
在上述操作之中,如果要进行一个添加一个肖战的数据,我们并不是直接添加肖战的数据,而是直接整个换掉之前数据重新换上我们数据,
直接将dom1的内容换成dom2的,这样就比较浪费资源。、
例子:
也就是说,如果之前有100个数据,我们在这基础上增加1个数据,要显示101 个数据。
那么我们的真实DOM操作就是用101的数据全部换掉之前的100数据
------------------列表比较清晰----------------
原数据:100
新数据:101
DOM添加:101
b,使用React实现虚假DOM:
i,虚假DOM是运行在内存中的
ii,.虚假dom产生计算新产生的数据,比较,如果没有变化那么就不改变,如果出现变化那么就将新的变化映射到真实DOM中。
例子:
原数据:100
新数据:101
DOM添加:1
4,React要掌握的JavaScript基础知识:
- 判断this的执行,
- class(类),
- ES6语法,
- Npm包管理
- 原型,原型链
- 数组常用方法
- 模块化