[JavaScript知识库]React（1）—— React简介、JSX语法、虚拟DOM

1.React简介

1.1 React是什么？

用于动态构建用户界面的 JavaScript 库(只关注于视图)

1. 发送请求获取数据
2. 处理数据（过滤，整理格式等）
3. 操作DOM呈现页面（React做的事情）

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

1.2 原生JS的缺点

1. 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
3. 原生JavaScript没有组件化编码方案，代码复用率很低

【补充】什么是浏览器重绘重排？

• 重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘
• 重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排

【补充】什么是模块化？什么是组件化？

• 模块

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3. 作用：复用js, 简化js的编写, 提高js运行效率

• 组件

4. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
5. 为什么要用组件： 一个界面的功能更复杂
6. 作用：复用编码, 简化项目编码, 提高运行效率

模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

1.3 React的优势

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在 React Native中可以使用React语法进行移动端开发
3. 使用虚拟DOM+Diff算法，尽量减少与真实DOM的交互

1.4 React高效的原因

1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2. DOM Diffing算法, 最小化页面重绘。

2.JSX语法

2.1 JSX简介

1. 全称: JavaScript XML
2. React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM
   React 使用 JSX 来替代常规的 JavaScript。使用 JSX 编写模板更加简单快速，大大提升了编程效率

2.2 JSX的使用规范

1. 样式类名调用时，不要用class，而是用className

<h1 className = 'color'>    
   Hello World!     
</h1> 

2. 标签中混入JS“表达式”时要用 { }

const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span> {myData} </span>     
</h1> 

3. 内联样式，要用style = {{ }} 并且value要用“驼峰写法”

const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span style = {{color:'white'}}>{myData}</span>    
</h1> 

4. jsx要求： 不能多有个根标签，根标签只能有一个 例如：本案例只能有一个< h1>,解决办法 在外面包裹一层div标签或者<> </>
5. 标签必须闭合， 例如： < input type=“text”> 不可以这么写， 得写成： < input type=“text”/> （可自结束）

3.虚拟DOM

3.1 虚拟DOM是什么？其本质是？

1. 本质是Object类型的对象 （一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3. 虚拟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>