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';
