react基础 - 生命周期函数

1. 组件的三个生命周期状态:
    Mount：插入真实 DOM
    Update：被重新渲染
    Unmount：被移出真实 DOM
2. 生命周期流程:
    * 第一次初始化显示: ReactDOM.render(<Xxx/>, containDom)
        constructor()
        componentWillMount() : 将要插入回调
        render() : 用于插入虚拟DOM回调
        componentDidMount() : 已经插入回调
    * 每次更新state: this.setState({})
        componentWillReceiveProps(): 接收父组件新的属性
        componentWillUpdate() : 将要更新回调
        render() : 更新(重新渲染)
        componentDidUpdate() : 已经更新回调
    * 删除组件:   ReactDOM.unmountComponentAtNode(div): 移除组件
        componentWillUnmount() : 组件将要被移除回调
3. 常用的方法
    render(): 必须重写, 返回一个自定义的虚拟DOM
    constructor(): 初始化状态, 绑定this(可以箭头函数代替)
    componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听

旧版生命周期：

挂载时：先执行构造器（constructor）=》组件将要挂载（componentWillMount）=》组件挂载渲染（render）=》组件挂载完成（componentDidMount）=》组件销毁（componentWillUnmount）

组件内部状态更新：组件是否应该更新（shouldComponentUpdate）=》组件将要更新（componentWillUpdate）=》组件更新渲染（render）=》组件更新完成（componentDidUpdate）

强制更新：调用this.forceUpdate()，这个api和setState一样都是react自带的，一般这个强制更新很少用，它的执行流程就是比上述的正常更新流程少一步询问是否更新（shouldComponentUpdate）

父组件重新render：调用组件将要接收新props（componentWillReceiveProps）=》组件是否应该更新（shouldComponentUpdate）=》组件将要更新（componentWillUpdate）=》组件更新渲染（render）=》组件更新完成（componentDidUpdate）

 注意：上述加粗的函数，只有在父组件状态发生改变了，重新调用render时才会调用子组件的componentWillReceiveProps函数，父组件第一次引用子组件的时不会调用的

新版生命周期：

新旧版的差别：

新版即将废弃老的3个钩子（componentWillMount、componentWillReceiveProps、componentWillUpdate），

新增了2个钩子（getDerivedStateFromProps、getSnapshotBeforeUpdate）