React简介

一、React是什么？

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

二、React谁开发的？

由Facebook开发且开源，近十年“陈酿”，阿里等大厂开始使用

三、为什么要学？

（一）原生js痛点

1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）

document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')

2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排

3.原生JavaScript没有组件化（模块化）编码方案，代码复用率低

（二）React特点

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

2.在React Native中可以用React语法进行移动端开发

3.使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互，提高性能

四、React依赖介绍

1）react.js:React核心库。

2）react-dom.js:提供操作DOM的react扩展库。

3）babel.min.js:解析Jsx语法代码转为Js代码的库。 

五、实例一初步认识React

1.桌面新建文件夹并用VS Code打开

2.建立js，01_hello_react两个文件夹，前者放react依赖，后者新建html文件

PS：可用过shift+！+回车快速生成模板

Ctrl+K+C ： // 注释

Ctrl+K+U ：取消//注释

Alt + Shift +A ：/* */ 多行注释

Alt + Shift +A ：取消多行注释

3.代码

4.页面效果

六、虚拟dom的两种创建方式

（一）使用jsx创建虚拟DOM

1.代码和上个案例基本一致，只在h1处添加了id

2.页面效果如下

（二）使用js创建虚拟DOM（一般不用这种写法）

1.代码

2.页面效果

（三）虚拟DOM与真实DOM

1.代码

2.页面效果 

3. 虚拟DOM对象最终都会被React转换为真实的DOM

七、jsx语法规则