React新生命周期

作者: 天花板上老蜥蜴 | 来源:发表于2020-08-10 14:44 被阅读0次

react的生命周期
react新生命周期
React新生命周期
React新生命周期--getDerivedStateFromP
React新生命周期--getDerivedStateFromP
React新生命周期--getDerivedStateFromP
react 新生命周期 static getDerivedSta
关于react的新生命周期
React概念图
react16新特性

首先，React生命周期分为三个阶段：挂载、渲染和卸载。由三种不同的形式组成：render渲染、props改变和state改变。由两种过程组成：挂载卸载过程、更新过程。

下面是React16.x版本之前的生命周期

旧生命周期

16.x之前的生命周期

1.挂载卸载过程

1.1.constructor()

当组件被实例化之后，即使不手写构造函数，react会自动创建并执行构造函数，并且构造函数是最先执行的。如果手写了构造函数，就必须手动调用父类的构造函数来实例化子类，否则会导致this指向错误。手写构造函数的目的就是为了给父类也就是this添加属性，即使不添加任何属性，react也会自动创建state，只不过此时的state为null

1.2.componentWillMount()

此生命周期函数代表组件已经经历了constructor()初始化数据之后，但是组件未挂载，也就是还未渲染DOM 的时候。

1.3.componentDidMount()

此生命周期函数代表组件已经被挂载完成，DOM节点已经渲染完成，可以在此阶段请求数据接口，返回数据之后会重新将数据渲染到组件中

1.4.componentWillUnmount ()

此过程完成组件的卸载与数据的销毁

2.更新过程

2.1.componentWillReceiveProps (nextProps)

父组件中改变了props传值时触发的函数, 但是此函数触发有条件：一、组件初次加载时不调用此函数二、当组件接受了新的props时才调用此函数三、当父组件进行更新以及父组件重新render（不管父组件的状态有没有改变）被调用后执行

2.2.shouldComponentUpdate(nextProps,nextState)

此函数表示组件接收到新的props或者state时调用，需要注意的是，初次渲染此函数不会执行。并且此函数返回bool值，返回值为true时，就会更新dom（使用diff算法更新）,当返回值为false时就会阻止更新

此生命周期函数可以起到性能优化的作用，因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

2.3.componentWillUpdate (nextProps,nextState)

此函数表示组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state

2.4.render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

2.5.componentDidUpdate(prevProps,prevState)

此函数表示组件数据更新已经完成,但是组件加载时不调用，组件更新完成后调用，需要注意的是此函数在render后执行

新生命周期

React生命周期新引入了两个生命周期函数：getDerivedStateFromProps、getSnapShotBeforeUpdate，代替在17.x版本中会废弃的生命周期方法：componentWillMount()、componentWillReceiveProps()、componentWillUpdate()。16.x中新增UNSAFE前缀为别名的三个函数UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()，并在17.x版本中会保留 UNSAFE前缀为别名的三个函数
getDerivedStateFromProps()无论是Mounting还是Updating，也无论是因为什么引起的Updating，全部都会被调用
getSnapshotBeforeUpdate()被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()

结合实例可以更直观的理解react新生命周期

import React, { Component } from 'react'

export default class NewReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
        // 当组件被实例化之后，即使不手写构造函数，react会自动创建并执行构造函数，并且构造函数是最先执行的
        // 如果手写了构造函数，就必须手动调用父类的构造函数来实例化子类，否则会导致this指向错误
        // 手写构造函数的目的就是为了给父类也就是this添加属性，即使不添加任何属性，react也会自动创建state，只不过此时的state为null
    }
    state = {
        age:18
    }
    static getDerivedStateFromProps=(props, state)=> {
        // 组件挂载必须要经历的生命周期
        // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；
        // 每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
        // 此函数是一个静态函数，所以函数体内不能访问this，输出完全由输入决定
        console.log('static getDerivedStateFromProps(props, state)')
        console.log(props)
        console.log(state)
        return state
    }
    componentDidCatch(error, info) {
        // 获取到javascript错误

    }
    changeState=()=>{
        this.setState({
            age:22
        })
    }
    render() {
        const {age} = this.state
        const {name} = this.props
        return (
            <>
                <h4>新生命周期</h4>
                <p>props值：name:{name},age:{age}</p>
                <button onClick={this.changeState}>change state</button>
            </>
        )
    }
    componentDidMount() { 
        // 挂载后调用且只调用一次
        console.log('componentDidMount')
    }

    shouldComponentUpdate(nextProps, nextState) {
        // nextProps和nextProps的含义就是字面量的含义，代表更新之后的状态
        // 组件Props或者state改变时触发，true：更新，false：不更新
        console.log('shouldComponentUpdate')
        console.log(nextProps)
        console.log(nextState)
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 组件更新前触发
        // 调用顺序与这个例子的顺序是一样的
        console.log('getSnapshotBeforeUpdate')
        return 'ok'
    }
    componentDidUpdate() {
        // 组件更新后触发
        console.log('componentDidUpdate')
    }

    componentWillUnmount() {
        // 组件卸载时触发

    }
}