react生命周期

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
}

react生命周期