react 生命周期函数详解和使用场景

react生命周期函数图解

生命周期函数指在某一个时刻组件会自动调用执行的函数，大致是四个大模块如下图

Initialization：初始化

constructor实质上就是初始化的一个方法

Mounting：挂载组件

    一、componentWillMount // 当组件即将挂载到页面的时候执行，页面还未挂载
    二、render // 负责页面重新渲染，挂载。
    三、componentDidMount // 组件被挂载到页面之后执行，只执行一次

Updation:组件更新

一、props
    1.componentWillReceiveProps//当一个组件从父组件接受参数，只要父组件的render函数执行，子组件的生命周期函数就会被执行
                                //组件第一次存在于父组件的时候，不会被执行。如果这个组件之前就存在与父组件中，才会执行
    2.shouldComponentUpdate  //组件被更新之前调用，需要有布尔类型的返回值
    3.componentWillUpdate  //组件被更新之前调用，但是在shouldComponentUpdate之后执行，如果shouldComponentUpdate返回值是true才能执行，false不执行
    4.render //负责页面重新渲染，更新组件
    5.componentDidUpdate  //组件更新王成之后执行
二、states
    1.shouldComponentUpdate
    2.componentWillUpdate
    3.render
    4.componentDidUpdate

Unmounting 组件移除

componentWillUnmounting//当这个组件即将被页面移除的时候执行，比如，删除list某一行数据的时候

react周期函数的使用场景

shouldComponentUpdate,因为父组件的render被重新渲染的时候，子组件的生命周期会被执行，为了提高性能，可以在shouldComponentUpdate进行判断，当传递给子组件的数据有变化的时候再执行子组件的生命之后。

shouldComponentUpdate(nextProps,nextState){
    if(nextProps !== this.props.content){
        return true
    }else {
        return false
    }
}

componentDidMount；数据请求应当放到此钩子函数中，不能放到render里面，因为只要数据有修改，render函数就会被执行，这样就有很多次请求数据，不合理。