[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 (
            
                hello react
            
        );
    }
}

ReactDOM.render(
    ,
    document.getElementById('page')
);

注：
（1）当一个组件需要调用Page组件时，只用写成，
但实际上解析成了React.createElement(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}) => (
    
        hello react
    
);

ReactDOM.render(
    ,
    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语法会被转译为，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