共计 1339 个字符，预计需要花费 4 分钟才能阅读完成。
组件加载
当组件被实例化并且插入 Dom 时所执行的方法，也会按照下的顺序依次执行。
constructor()
构造方法。
这个方法有两个目的：
初始化一个本地 state。
this.state = {color: ‘red’};
要避免将 props 参数直接赋值给 state, this.state = {color: props.color} 是不允许 的
绑定方法。
我们知道 React Class 中是不会继承 this 的，如果在 class 的方法中使用 this，那么我们需要将 this 绑定到方法中。
this.clickHandler = this.clickHandler.bind(this);
绑定 this，将需要 super(props), 否则会提示找不到 this.
示例：
constructor(props) {
super(props);
this.state = {color: ‘red’};
this.clickHandler = this.clickHandler.bind(this);
}
static getDerivedStateFromProps()
当本地 state 需要根据 props 来改变的时候可调用此方法。
这个方法是在 render() 前会被执行，只要执行 render() 都会被在之前被触发。
该方法有两个参数 props 和 state; 返回值为 state 对象, 不需要返回整体 state，把需要改变的 state 返回即可。
示例：
static getDerivedStateFromProps(props, state) {
if(props.color !== state.color) {
return {color: props.color};
}
}
render()
这个方法是 React 组件中必须要提供的方法。当 state 或者 props 任一数据有更新时都会执行。
需要注意当继承 PureComponent 时，不会对对象进行深度比较，也就是，不会根据对象内的对象变化时执行 render().
render() 是一个纯函数，也就是不能在这个方法中有类似 setState() 这样的行为。
返回的数据类型可以有：
null、String、Number、Array、Boolean。
React elements
Fragment
Portal
注意：不能返回 undefined.
当 shouldComponentUpdate() 返回 false 时，无论 state 和 props 有没有变化，这个方法都不执行。
示例：
render() {
return (
<div>{this.state.color}</div>
);
}
componentDidMount()
componentDidMount() 方法是在组件加载完后立即执行，也就是当该组件相关的 dom 节点插入到 dom 树中时。该方法在组件生命中只执行一次。
一般情况，我们会在这里 setState() 根据 props 的值，也可以从这里调用接口，获取服务端的数据，也可以在这里监听 websocket、setInterval 等操作。
注意：一些监听需要在组件卸载时清理掉，否则会引起异常。
示例：
componentDidMount() {
this.setState({color: this.props.color});
}
在线示例
推荐阅读《React 手稿》
