React虚拟DOM概念
在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。
和 DOM 操作比起来，js 计算是非常便宜的。基于JS的virtual DOM相比于直接重置真事的DOM，效率提升了不少。React中，更改某个节点内容，只会对当前节点进行更改渲染，不会重置整个DOM树。
React组件
组件是React中一个主要的特性。将页面不同的部分划分成不同的组件进行单独开发，对于模块化开发具有重要意义。同时，一个组件可以复用在不同的页面中，提高的代码的重用性和可维护行。
组件的创建
首先，建议通过npm来使用React。webpack 安装 React DOM 和构建你的包:
$npm install --save react react-dom babel-preset-react$webpack
注意: 如果你正在使用 ES2015, 你将要使用babel-preset-es2015包。
一个组件就是在通过React声明的一个类，具体过程如下：
首先要导入‘React’ 模块： import React from 'react';
import React from 'react';
export default class ComponentExample extends React.Component {
render() {
return (
<h1>Hello World</h1>
)
}
这样就定义了一个简单的可以给外部使用的React组件。“ComponentExample”为定义的组件名称，“export default” 关键字定义了这个组件是可以被外部引用的，以<ComponentExample />形式作为一个元素为其他组件使用。
例如：
import ComponentExample '路径';
class Index extends React.Component {
render() {
return (
<div>
<ComponentExample/>
<h2>Hi, Maggie</h2>
</div>
)
}
}
用import关键字将ComponentExample引入进来，那么<ComponentExample/>就被作为一个子组件嵌套在Index组件中。
React多组件嵌套
以Index组件为例。假如我们定义了一个<ComponentExample/>和<ComponentExample2/>我们可以将这两个组件被Index组件使用：
class Index extends React.Component {
render() {
return (
<div>
<ComponentExample/>
<ComponentExample2/>
</div>
)
}
}
这里需要注意的是组件的return函数里返回的HTML节点必须是一个。因此需要将所有组件包含在一个外部节点中。
值的注意的是，组件的命名规范与文件的结构化在团队开发中是非常重要的。
组件入口的定义
如何将组件添加到HTML文件中呢？这就需要ReactDOM来定义其入口。
首先，在html文件中创建一个入口节点，如：
<div id="example"></div>
再以Index节点为例，将其加载到html文件id为“example”的节点中。
var ReactDOM = require('react-dom');
var React = require('react');
class Index extends React.Component {
render() {
return (
<div>
<ComponentExample/>
<ComponentExample2/>
</div>
)
}
}
ReactDOM.render(
<Index/>,
document.getElementById('example')
);
这样Index组件中的内容就可以在html中显示了。
