1.初始化阶段：
constructor
如果你不需要初始化状态也不需要绑定handle函数的this，那么你可以不实现constructor函数，可由默认实现代替。
componentWillMount
render
componentDidMount:进行DOM操作，进行异步调用初始化页面
2.运行中状态：
1.componentWillReceiveProps(nextProps):组件将要接收到属性的时候调用
componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
if (this.props.sharecard_show !== nextProps.sharecard_show){
//在这里我们仍可以通过this.props来获取旧的外部状态
//通过新旧状态的对比，来决定是否进行其他方法
if (nextProps.sharecard_show){
this.handleGetCard();
}
}
}
注意：想作任何变更最好都将两个状态进行比较 ；不然容易造成组件的多次渲染，并且这些渲染都是没有意义的
2.shouldComponentUpdate(nextProps, nextState)
- 此钩子函数做性能优化 该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。
- React中的就提供了一个
PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组
3.componentWillUpdate(nextProps, nextState):组件即将更新不能修改属性和状态
4.render:组件重新描绘
5.componentDidUpdate:组件已经更新
3.销毁阶段：
componentWillUnmount: 清理组件定时器，网络请求或者相关订阅等
官方决定，从v17开始删除以下三个生命周期钩子：
componentWillMount
componentWillReceiveProps
componentWillUpdate
增加
getDerivedStateFromProps
getSnapshotBeforeUpdate
// before
componentWillReceiveProps(nextProps) {
if (nextProps.isLogin !== this.props.isLogin) {
this.setState({
isLogin: nextProps.isLogin,
});
}
if (nextProps.isLogin) {
this.handleClose();
}
}
// after
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.isLogin !== prevState.isLogin) {
return {
isLogin: nextProps.isLogin,
};
}
return null;
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.isLogin && this.props.isLogin) {
this.handleClose();
}
}
通常来讲，在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。在老版本的 React 中，这两件事我们都需要在 componentWillReceiveProps中去做。而在新版本中，官方将更新 state 与触发回调重新分配到了 getDerivedStateFromProps 与 componentDidUpdate 中，使得组件整体的更新逻辑更为清晰。而且在 getDerivedStateFromProps 中还禁止了组件去访问 this.props，强制让开发者去比较nextProps 与prevState 中的值，以确保当开发者用到getDerivedStateFromProps这个生命周期函数时，就是在根据当前的 props 来更新组件的 state，而不是去做其他一些让组件自身状态变得更加不可预测的事情。
react中bind函数
- 就是上面说的在constructor函数中显示调用bind。
- 在onClick的时候进行bind: <button onClick = {this.handleClick.bind(this)} >，这种方式的劣势是每次调用的时候都需要进行bind，优势是方便传参，处理函数需要传参可以参考React的文档
- 声明函数时使用箭头匿名函数，箭头函数会自动设置this为当前类。(简洁有效，墙裂推荐)
<button onClick={this.handleClick}>click</button>
handleClick = () => {
console.log('handleClick', this); // Component
}
