React简介

一、react是什么

是一个将数据渲染为html视图的开源javascript库，由feel book开源。

二、react为什么要学

javascript痛点

1、原生javascript操作原生dom频繁，效率低，浏览器压力较大**（dom-API操作UI）**。

2、使用javascript直接操作dom,浏览器会进行大量的重排。

3、原生javascript没有**组件化编码（不仅仅js代码，包括样式）**方案，代码复用率低。

react优点

1、采用组件化模式，声明式编码，提高开发效率及组件利用率。

2、在react native中可以使用react语法进行移动端开发（android、ios）。

3、使用虚拟dom+优秀的diffing算法（最小化页面重绘），尽量减少与真实dom的交互。

三、react各个包作用

1、react.development.js

react核心库

2、react-dom.development.js

用户支持react操作dom

3、babel.min.js

在react中不在使用js语法而是使用jsx语法，但浏览器只能识别js，该包的作用则将jsx转为js。

四、创建虚拟DOM的两种方式

1、纯js语法创建虚拟DOM（不建议，代码冗余）

const VDOM = React.createElement('h1',{id:'title'},'你好世界')
ReactDOM.render(VDOM,document.getElementById('test'))

2、使用JSX创建虚拟DOM。

const VDOM = (
            <h1 id = 'title'>
            	<span>Hello,React</span>
            </h1>
        )
        ReactDOM.render(VDOM,document.getElementById("test"))

五、虚拟DOM与真实DOM

1、虚拟DOM本质是一个Object对象。

2、虚拟DOM比较”轻“，真实DOM比较“重”*(真实DOM返回字段相比虚拟DOM字段较多)。

3、虚拟DOM最终会被React转化为真实DOM，并渲染到页面上。