本文主要是介绍大前端React-01：React粗介绍-React是什么？传统的使用JavaScript，DOM交互痛点？React的优点？React前置知识，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1，什么是React？

（1）传统的构建用户界面方式？

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

（2）结论React是什么？

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

（3）谁开源的？

FaceBook

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包管理
• 原型，原型链
• 数组常用方法
• 模块化

这篇关于大前端React-01：React粗介绍-React是什么？传统的使用JavaScript，DOM交互痛点？React的优点？React前置知识的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！