文章目录
1.React简介
1.1 React是什么？
用于动态构建用户界面的 JavaScript 库(只关注于视图)
- 发送请求获取数据
- 处理数据（过滤，整理格式等）
- 操作DOM呈现页面（React做的事情）
React是一个将数据渲染为HTML视图的开源JavaScript库
1.2 原生JS的缺点
- 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
- 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
- 原生JavaScript没有组件化编码方案，代码复用率很低
【补充】什么是浏览器重绘重排？
- 重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘
- 重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排
【补充】什么是模块化？什么是组件化？
- 模块
- 理解：向外提供特定功能的js程序, 一般就是一个js文件
- 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
- 作用：复用js, 简化js的编写, 提高js运行效率
- 组件
- 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
- 为什么要用组件： 一个界面的功能更复杂
- 作用：复用编码, 简化项目编码, 提高运行效率
模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
1.3 React的优势
- 采用组件化模式、声明式编码，提高开发效率及组件复用率
- 在 React Native中可以使用React语法进行移动端开发
- 使用虚拟DOM+Diff算法，尽量减少与真实DOM的交互
1.4 React高效的原因
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- DOM Diffing算法, 最小化页面重绘。
2.JSX语法
2.1 JSX简介
- 全称: JavaScript XML
- React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
- 作用: 用来简化创建虚拟DOM
React 使用 JSX 来替代常规的 JavaScript。使用 JSX 编写模板更加简单快速，大大提升了编程效率
2.2 JSX的使用规范
- 样式类名调用时，不要用class，而是用className
<h1 className = 'color'>
Hello World!
</h1>
- 标签中混入JS“表达式”时要用 { }
const myData = 'HeLlo rEaCt'
<h1 className = 'color'>
<span> {myData} </span>
</h1>
- 内联样式，要用style = {{ }} 并且value要用“驼峰写法”
const myData = 'HeLlo rEaCt'
<h1 className = 'color'>
<span style = {{color:'white'}}>{myData}</span>
</h1>
- jsx要求： 不能多有个根标签，根标签只能有一个 例如：本案例只能有一个< h1>,解决办法 在外面包裹一层div标签或者<> </>
- 标签必须闭合， 例如： < input type=“text”> 不可以这么写， 得写成： < input type=“text”/> （可自结束）
3.虚拟DOM
3.1 虚拟DOM是什么？其本质是？
- 本质是Object类型的对象 （一般对象）
- 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
3.2 代码展示
通过一下代码案例可对比真实DOM和虚拟DOM的区别
script src="./react库/旧版本/react.development.js"></script>
<script src="./react库/旧版本/react-dom.development.js"></script>
<script src="./react库/旧版本/babel.min.js"></script>
<script type="text/babel">
const VDOM = <h1>hellow,React</h1> // 虚拟DOM
ReactDOM.render(VDOM, document.getElementById('div'))
const TDOM = document.getElementById('div1') // 真实DOM
console.log('虚拟DOM', VDOM);
// （轻）
/*$$typeof: Symbol(react.element)
key: null
props: {children: 'hellow,React'}
ref: null
type: "h1"
_owner: null
_store: {validated: false}
_self: null
_source: null
[[Prototype]]: Object*/
console.log('真实DOM', TDOM);
// (重)
/*accessKey: ""
align: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
onpointerenter: null
等等...............*/
</script>