001 React简介
[A] 基础介绍
react是一个将数据渲染成html视图的JavaScript库(即帮助操作DOM呈现页面)
开发人员
由Facebook开发，且开源
应用：
目前react正在被腾讯，阿里等互联网大厂使用中...
原生JavaScript的缺陷：
1. 原生的JavaScript操作DOM繁琐，且效率低(即使用document提供的API去操作UI)
2. 使用原生的JavaScript直接操作DOM，会引起浏览器大量的重排和重绘
3. 原生JavaScript没有组件化的编码方案，低吗复用率低
react的特点：
1. 采用组件化模式，声明式编码，提高开发效率及组件复用率
2. 在react Native中可以使用React语法进行移动端开发
3. 使用 虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互
[B] react基本使用
下载依赖包：
react.development.js react的核心库 react-dom.js 提供操作DOM的react拓展库 babel.min.js 即提供babel功能，实现 ES6 => ES5 import => require js => jsx prop-type.js 为react类组件状态提供类型约束
html引入jsx：
顺序：
1. 引入react核心库
2. 引入react-dom，用于支持react操作dom
3. 引用babel.js，用于将jsx转化为js
开发：script标签需标注type="text/babel"
1. 创建虚拟DOM
const Vdom = <div>hello world</div>
2. 渲染虚拟DOM到页面
ReactDOM.render(Vdom, document.getElementById('box'))
html引入js：
顺序：
1. 引入react核心库
2. 引入react-dom，用于支持react操作dom
// 不再需要babel.js，因为直接写的就是js
开发：script标签需标注type="text/javascript"
1. 创建虚拟DOM
const Vdom = React.createElement('div', { id: 'box'}, 'hello, world')
2. 渲染虚拟DOM到页面
ReactDOM.render(Vdom, document.getElementById('box'))
注：
而实际上，开发人员写的jsx，会首先转化成js，再去执行的
[C] 关于react的虚拟dom
1. react创建的虚拟DOM，就是一个普普通通的js对象
2. 虚拟DOM比较"轻"，因为虚拟dom在react内部使用，无序真实dom上那么多属性
3. 虚拟dom最终会被react转化成真实的dom，呈现在页面上
[D] JSX语法
简介：
1. 全称javascriptXML
2. react定义的是一种js拓展语法：js + xml
3. 本质上是React.createElement(component, props, ...child)方法的语法糖
4. 作用：用来简化创建虚拟dom的过程
1. 写法：
var Vdom = <div>content</div>
2. 注意1：
这不是一个字符串，而是一个html/xml标签
3. 注意2：
它最终会被转化成一个js对象
5. 标签名可以是html标签，也可以是自定义标签
语法规则：
1. 定义虚拟dom时，写的是html元素，不应放在引号内
2. 标签中写入js表达式时，应放在{}中，表示引用js
注意：
这里是js表达式才能放在{}中，而不是js语句
表达式：
一个表达式计算出来就是一个值，可以放在任何需要值的地方
(1) 100
(2) a + b
(3) demo(1)
(4) arr.map()
(5) function() {}
语句：
js可执行语句，其执行结果可以是一个值，也可以没有任何值
(1) if() {}
(2) for() {}
(3) switch() {case: xxx}
3. 标签中引用class样式时，应用className="box"
4. 标签中引入style样式时，需放在{}中，写入一个对象
style={{color: 'red'}}
外层的{}表示将内部的语句当做js去解析。内部的{}为对象的{}
5. 虚拟DOM必须只有一个根标签
6. 关于标签首字母：
(1) 若小写字母开头，则将标签改为html同名标签，若html中无对应的同名标签，则警告
(2) 若大写字母开头，则react将去渲染对应的自定义组件，若没找到对应的组件，则报错
