React特点:JSX、虚拟Dom、声明式（组件化）

虚拟Dom

首先来了解下真实的Dom，是渲染到页面上的真实节点。真实Dom是由浏览器提供的，我们可以使用浏览器提供的API去操作这些节点。
而虚拟Dom是由开发者实现的，将页面节点存储为一颗虚拟Dom树，但因为没有渲染到页面上，因此并不能使用浏览器提供的API去操作节点。当真实Dom被修改，将被重新刷新加载。如果是修改一棵庞大的Dom树的小节点而造成页面重新计算、重绘的代价是非常大的，因此React采用了虚拟Dom节点与真实Dom一一对应，通过Diff算法进行对比差异，实现按需加载的策略，以便于提高页面性能。

JSX语法

创建Dom元素

首先了解下React是如何创建Dom元素的

• 创建Dom节点，let myDiv = React.creatElement('div'，{title："标题"，id："myTitle"}，childrenModule）
• 将结点渲染到页面app元素内部，React.render(myDiv，document.getElementById("app"));
  JSX是一种JS语法糖，JSX最终也会被编译成React.creatElement(···)+React.render(···)。

在JSX中编写JS

在JSX中，使用{···}即可编写JS。
例如，使用三目表达式按状态渲染页面

React.render(S
<div id="container">
	{ this.state.isShow ? <div className="showBox" >···</div> : null}
</div>
)

注：在使用JSX编写页面时，务必保证根元素唯一。

万物皆可组件化

组件可被拆分为不同的功能片段，这些片段可以在其他组件中使用。

组件名称应该始终以大写字母开头

React解析标签时，是以标签首字母来进行区分的，如果检查到标签首字母为小写，则会以普通html标签来解析。如果检查到标签首字母为大写，则会按照组件的形式去解析。
示例：

function Hello (){
		return  <div> hello, I am Liz</div>
}

React.render(<Hello></Hello>, document.getElementById('app');