React生命周期

mount（装载）

1.constructor(只执行一次)

初始化state（根据props生成state也可以在这里进行）

constructor(props) {
    super(props)
    ……
    this.state = {
        
    }
    ……
}

2.componentWillMount

(1)在17版本中将变成UNSAFE_componentWillMount

(2)组件将要mount,这里是唯一一个可以直接同步修改state并且在页面正确（同步）渲染的地方

(3)将要被废弃的组件，实际上没什么作用，有人喜欢在这里做ajax请求，但官方不推荐在这里做ajax请求

3.render

构建虚拟DOM

4.componentDidMount(只执行一次)

(1)真实的DOM已经渲染到页面上，可以再这里获取真的的DOM

(2)如果要使用第三方的DOM框架，应该在这里去初始化

(3)ajax请求也推荐在这个周期来进行，有数据返回之后，去setState，将会执行到update阶段

update（更新）

1.props有改变：

在17版本中将变成UNSAFE_componentWillReceiveProps

componentWillReceiveProps(nextProps,nextState),如果在constructor里面，有通过props来生成state这样的操作，这里也得做同样的操作，在这的this.props还是原来的

2.shouldComponentUpdate(nextProps, nextState)

唯一一个做react优化饿生命周期，必须返回一个布尔值，如果是false,就不会再往下执行，一般会根据nextProps VS this.props 或者nextStste VS this.state去判断返回true还是false

3.componentWillUpdate

在17版本中将变成UNSAFE_componentWillUpdate

4.render

重新构建虚拟DOM

5.componentDidUpdate

真的DOM已经更新到页面上

unMount（销毁）

1.componentWillUnMount

在这里去清空定时器之类的东西

新增

static getDerivedStateFromProps(props, state) {
    在这里没有this
    需要return 一个对象
}

不管是mount还是update阶段都会执行

注意：

在老版本里（<16），使用createClass,这里可以有

getDefaultProps(新版本直接在class里写 static defaultProps = {})

和

getInitialState(新版本直接在constructor里写this.state= {}或者直接在class里写 state = {})

两个生命周期