React框架
React是一个JS库，可以简化可视化界面的开发，由Facebook在2013年发布。
为什么要学习React
那么为什么要学习React呢？
这要先从原生js的痛点出发，原生JS的痛点在于：
- 用DOM的API去操作DOM，过程十分繁琐，且效率低
- 用js直接操作DOM，浏览器会进行大量的回流和重绘
- 原生JS没有组件化，代码复用率低
那么，React又如何呢？
React特点
- 组件化开发，代码复用率高，提高开发效率
- 使用虚拟DOM和Diff算法，尽量减少与真是DOM的交互，提高页面性能
故前端常使用React框架来简化开发，提高开发效率。
React核心
（1）React基于JSX（JavaScript Xml）的语法，可以和html,js混合书写
JSX语法：组件可以以自定义标签的形式引用；
（2）组件（Component）：是数据和逻辑的封装体，可以实现用户界面的模块化开发，提高了代码复用率、简化了开发，可维护性好。
React框架的最大优势在于：支持创建虚拟DOM，提高页面性能
JSX语法
（1）JSX就是JavaScript XML的缩写，是基于JavaScript的XML；
（2）通过React XML方式定义的虚拟DOM，最终也会转换为通过createElement()方法创建的节点。
语法详解
（1）一般语法形式：
const element=(
<tag-level-1>
<tag-level-2>
</tag-level-2>
</tag-level-1>
)
注意：
- element中必须有且只能有一个根标签；
- 模块化开发中（组件）允许使用<></>作为根标签
（2）JSX算术表达式：用大括号{}表示
例如：
const reactSpan = (
<span>
<h3>JSX算术表达式</h3>
<p>
1+2 = { 1+2 }
</p>
</span>
)
（3）JSX条件表达式：在JSX表达式中不能使用if语句,但是可以使用条件表达式(?:构成的表达式)
使用条件运算符：xx?xx:xx
const reactSpan = (
<span>
{1==1?'满足条件输出':'不满足条件输出'}
</span>
)
（4）JSX嵌入表达式：在外部定义变量，在虚拟DOM中通过‘{}’引用变量
（5）JSX对象表达式：可以通过“对项名.属性名”的方法使用
例如：
name='张三'
var obj={
name:'星子',
gender:'女',
}
const reactSpan = (
<span>
<p>姓名：{name}</p>
<p>姓名：{obj.name}</p>
<p>性别：{obj.gender}</p>
</span>
)
（6）JSX函数表达式：在JSX中可以直接调用JavaScript中的函数
var obj={
name:'星子',
gender:'女',
}
function showInfo(user){
return '姓名：'+user.name+'\n性别：'+user.gender;
}
const reactSpan = (
<span>
<p>{showInfo(obj)}</p>
</span>
)
React开发过程
（1）导入对应的js文件
<script src="../js/react.development.js"></script> <!--React核心库-->
<script src="../js/react-dom.development.js"></script> <!--React与Dom有关的库-->
<script src="../js/babel.min.js"></script> <!--用于将ES6转换为ES5-->
babel主要是用来将ES6或更高版本的js代码转换为ES5的代码，从而提高兼容性
（2）创建DOM
（3）进行DOM的渲染：React.render(虚拟DOM，实际DOM)
实际DOM
传统的HTML的UI设计，承载了数据的呈现和更新，浏览器在呈现DOM之前，要构建一颗DOM树，一旦该DOM树种某一个节点发生了变化，就必须重新构建树（从头开始遍历节点，直到改变了的节点）；对于复杂的DOM，频繁的重建DOM树就会导致页面性能下降。
虚拟DOM
先构建一颗虚拟的DOM树，若树中的某一点发生了变化，只对虚拟DOM树进行局部更新，然后将虚拟的DOM渲染到实际的DOM中。
例如：
<div id="react-div"></div>
<script type="text/babel">
const reactDiv=document.getElementById('react-div')
var arr=[
<p>西柚</p>,
<p>薄荷</p>
]
const reactSpan=(
<span>
<p>{arr}</p>
</span>
)
ReactDOM.render(reactSpan,reactDiv)
</script>
函数组件
基本用法：
<div id="react-div"></div>
<script type="text/babel">
const reactDiv=document.getElementById('react-div');
function HelloReact(){
return <div>
<h2>React组件:</h2>
<p>我是函数组件</p>
</div>
}
ReactDOM.render(<HelloReact/>,reactDiv)
</script>
类组件
基本用法：
<div id="react-div"></div>
class HelloReact extends React.Component{
render(){
return <div>
<label>姓名:
<input type="text"/>
</label>
</div>
}
}
ReactDOM.render(<HelloReact/>,document.getElementById('react-div'));
虚拟DOM渲染过程
先构建一颗虚拟的DOM树，若树中的某一点发生了变化，只对虚拟DOM树进行局部更新，然后将虚拟的DOM渲染到实际的DOM中。
JSX虚拟DOM渲染为真实DOM的原理和步骤：
（1）基于babel-preset-react-app把JSX语法变为React.createElement的模式；
（2）基于React.createElement方法执行创建出虚拟DOM对象（JSX对象）；
（3）基于ReactDOM.render把创建的虚拟DOM对象渲染到页面指定的容器中（变为真实DOM）。
|