react中的生命周期函数

生命周期函数是指组件在某一时刻会自动执行的函数。

// 在组件即将被第一次挂载到页面时执行，UNSAFE_componentWillMount即之前的componentWillMount，react官方修改了旧版生命周期的名字
UNSAFE_componentWillMount() {}

// render函数是做页面的挂载操作
render() {}

// 组件第一次挂载到页面之后执行，ajax请求一般放在这个生命周期
componentDidMount() {}

// 当一个组件从父组件接受了参数
// 如果这个组件第一次存在于父组件中，不会执行
// 如果这个组件之前已经存在于父组件中，才会执行
// 此生命周期可以用来监听父组件传值的props变化
componentWillReceiveProps() {}

// 组件被更新之前执行(即组件里面的state数据发生变化)，这个生命周期需要返回一个布尔值
shouldComponentUpdate(nextProps, nextState) {
    // 此处的content是该组件接受的父组件的传值(这里是随便写的)
    // 这段代码的意思是，如果父组件传值发生变化才更新子组件，反正则不更新，加上这段代码能够优化性能
    if(nextProps.content !== this.props.content){
        return true;
    } else {
        return false;
    }
}

// 组件被更新之前执行，但是他在shouldComponentUpdate返回true之后才执行反之就不会执行
componentWillUpdate() {}

// 组件更新完成之后执行
componentDidUpdate() {}

// 当这个组件即将被从页面剔除的时候，会被执行
componentWillUnmount() {}