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中显示了。