[React] 构建组件的两种方式

1. ES6 class

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Page extends Component {
    constructor(props) {
        super(props);

        this.state = {
            innerState: 2
        };
    }

    render() {
        return (
            <span
                data-innerProp={this.props.pageProp}
                data-innerState={this.state.innerState}>
                hello react
            </span>
        );
    }
}

ReactDOM.render(
    <Page pageProp={1} />,
    document.getElementById('page')
);

注：
（1）当一个组件需要调用Page组件时，只用写成<Page />，
但实际上解析成了React.createElement(Page);方法来创建Page实例，
这意味着在一个应用中，调用几次<Page />，就会创建几个Page组件的实例。

（2）生命周期方法

// mount
constructor 
componentWillMount 
render 
componentDidMount 
componentWillUnmount

// update
componentWillReceiveProps 
shouldComponentUpdate 
componentWillUpdate 
render 
componentDidUpdate

2. 无状态函数

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const Page = ({pageProp}) => (
    <span
        data-innerProp={pageProp}>
        hello react
    </span>
);

ReactDOM.render(
    <Page pageProp={1} />,
    document.getElementById('page')
);

注：
（1）无状态函数不存在state，也没有生命周期方法。
在适合的情况下，我们都应该且必须使用无状态组件。
无状态组件会始终保持一个实例，避免了不变要的检查和内存分配。

（2）无状态组件没有生命周期方法，也就没有shouldComponentUpdate，渲染到该类组件时，每次都会重新渲染。
我们可以使用Recompose库的pure方法，将无状态组件转换成class语法，并加上PureRender。

const OptimizedComponent = pure(ExpensiveComponent);

（3）jsx文件中如果没有导入React会报错：Uncaught ReferenceError: React is not defined
这是因为jsx语法<Page />会被转译为，React.createElement(Page, null), document.getElementById('page')，所以React是必须的，即使jsx文件中没有显式使用React对象。类似的，将React对象重命名也会报错，例如：

import { default as RT, Component } from 'react';

参考

React: Functional and Class Components
深入React技术栈 - P19~P20