# 1.是什么

用于构建用户界面的jsp库

# 2.为什么学习

1. 原生jsp操作DOM繁琐，效率低
2. jsp直接操作DOM，浏览器会进行大量重绘重排
3. jsp没有组件化方案

# 3.react的特点

1. 组件化模式
2. 移动端开发
3. 虚拟DOM+优秀Diffing算法

# 4.虚拟DOM与真实DOM

1. React提供了一些API来创建一种 “特别” 的一般js对象
2.	虚拟DOM对象最终都会被React转换为真实的DOM
3.	我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

# 5.JSX

1.	全称:  JavaScript XML
2.	react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3.	作用: 用来简化创建虚拟DOM 
1)	写法：var ele = <h1>Hello JSX!</h1>
2)	注意1：它不是字符串, 也不是HTML/XML标签
3)	注意2：它最终产生的就是一个JS对象
4.	标签名任意: HTML标签或其它标签
5.	标签属性任意: HTML标签属性或其它
6.	基本语法规则
1)	遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2)	遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
7.	babel.js的作用
1)	浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)	只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

# 6. 渲染虚拟DOM(元素)

1.	语法:  ReactDOM.render(virtualDOM, containerDOM)
2.	作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3.	参数说明
1)	参数一: 纯js或jsx创建的虚拟dom对象
2)	参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

# 7.模块与组件

## 1.模块

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

## 2.组件

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