这里用到了ES6的class、extends等关键词

接下来我们用ReactDOM.render方法将其render到页面上

let names = [
    'flypie ',
    'flyboy '
];

ReactDOM.render(
    <Hello name={names}/>,
    document.body
);

组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

下图是官方文档里对各种函数执行位置的表述

这里我们做个实验：

let Hello = React.createClass({

    getInitialState: function () {
        console.log('getInitialState');
        return {};
    },

    getDefaultProps: function () {
        console.log('getDefaultProps');
        return {};
    },

    componentWillMount: function () {
        console.log('componentWillMount');
    },

    componentDidMount: function () {
        console.log('componentDidMount');
    },

    componentWillReceiveProps: function () {
        console.log('componentWillReceiveProps');
    },

    shouldComponentUpdate: function () {
        console.log('shouldComponentUpdate');
        return true;
    },

    componentWillUpdate:function(){
        console.log('componentWillUpdate');
    },

    componentDidUpdate:function(){
        console.log('componentDidUpdate');
    },

    componentWillUnmount:function(){
        console.log('componentWillUnmount');
    },

    render: function () {
        return (
            <div>
                <h1>
                    {this.props.name}
                </h1>
            </div>
        );
    }
});

let names = [
    'flypie ',
    'flyboy '
];

ReactDOM.render(
    <Hello name={names}/>,
    document.body
);

运行程序，控制台输出结果如下：