大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识

1,什么是React?

大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识

(1)传统的构建用户界面方式?

  • a,发送请求获取数据
  • b,处理数据(过滤,整理格式等)
  • c,操作DOM呈现(react代替部分)

(2)结论React是什么?

React是将数据渲染为HTML视图的开源JavaScript库。

(3)谁开源的?

FaceBook

2,传统JavaScript中使用DOM的痛点在哪?

(1)原生的JavaScript操作DOM繁琐,效率低(DOM-API操作UI)
大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识
(2)使用JavaScript操作DOM,浏览器会进行大量的重绘重排(资源耗损失大,渲染效率低)
(3)原生态JavaScript没有组件化编码方案,代码复用率低
我们知道作为一种轻量级的语言,JavaScript当然可以像分类那样进行一个交互编写了,但是HTML和css怎么拆分?
大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识

3 ,React的优点在哪?

大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识

(1)采用组件化模式声明式编码,提高开发效率和组件复用率

a,组件化模式:

组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。
参考文章:官网:组件 & Propsl

b,声明式编码:

声明式(declarative)是结果导向的,命令式(imperative)是过程导向的。它们都有自己适用的场景和局限。
参考文章:声明式(declarative) vs 命令式(imperative)

(2)在React Nativity中可以使用React语法进行移动端开发

(3)使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

a,原生JavaScript实现真实DOM操作

大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识
在上述操作之中,如果要进行一个添加一个肖战的数据,我们并不是直接添加肖战的数据,而是直接整个换掉之前数据重新换上我们数据,
直接将dom1的内容换成dom2的,这样就比较浪费资源。、
例子:
也就是说,如果之前有100个数据,我们在这基础上增加1个数据,要显示101 个数据。
那么我们的真实DOM操作就是用101的数据全部换掉之前的100数据
------------------列表比较清晰----------------
原数据:100
新数据:101
DOM添加:101
大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识

b,使用React实现虚假DOM:

i,虚假DOM是运行在内存中的
ii,.虚假dom产生计算新产生的数据,比较,如果没有变化那么就不改变,如果出现变化那么就将新的变化映射到真实DOM中。
例子:
原数据:100
新数据:101
DOM添加:1
大前端React-01:React粗介绍-React是什么?传统的使用JavaScript,DOM交互痛点?React的优点?React前置知识

4,React要掌握的JavaScript基础知识:

  • 判断this的执行,
  • class(类),
  • ES6语法,
  • Npm包管理
  • 原型,原型链
  • 数组常用方法
  • 模块化
上一篇:算法趣题-Q03


下一篇:Java基础_101. 对象的使用