react生命周期

组件的生命周期可分成三个状态：

1. Mounting：已插入真实 DOM（挂载）
2. Updating：正在被重新渲染 （更新）
3. Unmounting：已移出真实 DOM （卸载）

1.挂载

    constructor()
    static getDerivedStateFromProps()
    render()
    componentDidMount() 

import React, {Component} from 'react'
export default class One extends Component{
    constructor(){
        super();
        this.state = { }
    }
    render(){
        return (
            <div></div>
        )
    }
    componentDidMount(){ }
}
// react16.0+之后新增的特性
//方法的作用：根据外部属性，修改内部的state值
// 返回值如果为null，就不需要修改
// 返回值如果为对象，对象中的值会合并到现有的state中。
// 方便外部属性转变为内部属性，但是注意不能获得对象的引用，而要进行深拷贝
// 方便进行属性计算。
One.getDerivedStateFromProps = function(props, state){
    console.log('getDerivedStateFromProps...');
    // console.log(rest);
    // return null;//不需要修改
    return { }
}

2.更新
    static getDerivedStateFromProps()
    shouldComponentUpdate()
    render()
    getSnapshotBeforeUpdate()
    componentDidUpdate()

import React, {Component} from 'react'

export default class One extends Component{

    constructor(){
        super();
        this.state = {  }
    }
    
    render(){
        return (
            <div> </div>
        )
    }

    //dom结构是否应该更新，不管返回值为true还是false数据都会更新
    shouldComponentUpdate(newProps, newState){
        
    }
    // react16.0+新增的 
    //dom结构更新前的最后一次函数的执行
    // 返回值会传入componentDidUpdate中
    // 在这个方法中可以进行判断componentDidUpdate是否需要做相应dom结构的变化。
    getSnapshotBeforeUpdate(oldProps, oldState){
        return false;
    }
    componentDidUpdate(oldProps, oldState, snapshot){ }
}
One.getDerivedStateFromProps = function(props, state){
    return { }
}

3.卸载

    直接加这个方法。
    componentWillUnMount()
    移除监听