react总结之生命周期函数

实际开发中,会经常使用到生命周期函数,使得在页面在浏览器上展示之后有我们需要的效果,或者在对页面上的元素进行操作的时候,页面是否要做出相应的变化!以下是常用的生命周期函数,以及执行的阶段和经常使用它来做的事情!

import React, { Component, createRef } from 'react'
import ReactDom from 'react-dom'
 class TestLive extends Component {
     // 最先执行构造器,只会执行一次
    constructor(props) {
        super(props);
        console.log('构造函数第一个执行');
        this.state ={
            text: ''
        }
    }

    // 17版本新的生命周期函数,会在组件挂载和每次更新前(执行在getSnapshotBeforeUpdate之前)执行,两个参数分别是最新的props和上一次的state
    // 这里有个知识点,当使用到该函数时,因为该函数是静态的,所以其内部不可以使用this
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('getDerivedStateFromProps ---- 组件将要挂载第二个执行');
    }
    // 17将会移除,如果使用了getDervicedStatFromProps,则该函数不会执行,反之该函数执行,该函数只会在组件生成的时候执行一次
    componentWillMount() {
        console.log('componentWillMount ---- 组件将要挂载第二个执行');
    }
    // 组件挂载完成时执行,只会执行一次,一般用于页面初始化获取页面列表数据
    componentDidMount() {
        console.log('componentDidMount ---- 第四个执行组件挂载完成');
    }
    // 限定组件是否需要是否需要更新,当返回值是true的时候,才需要会更新组件(页面发生变化),有关组件更新的生命周期函数才会执行
    // 这里用于做组件的优化 每次更新组件前执行
    shouldComponentUpdate(nextProps, nextPerv) {
        console.log('shouldComponentUpdate ---- 在第五个之前执行,如果返回值是false,则不走组件更新函数');
        return true;
    }
    // 组件将要更新时执行,该函数存在是componentWillUpdate无效,每次更新组件的时候执行
    getSnapshotBeforeUpdate() {
        console.log('第五个执行组件将要更新的函数--- getSnapshotBeforeUpdate');
    }
    // 17将会移除,如果使用了getSnapshotBeforeUpdate,那么该函数不执行,每次更新组件的时候执行
    componentWillUpdate() {
        console.log('componentWillUpdate ---- 第五个执行组件将要更新的函数');
    }
    // 组件更新完成,每次更新组件的时候执行
    componentDidUpdate() {
        console.log('componentDidUpdate ---- 第六个执行组件更新完成');
    }
    // 组件将要被卸载,这里用于清除定时器和取消订阅,只会执行一次
    componentWillUnmount() {
        console.log('componentWillUnmount ---- 第七个执行组价销毁');
    }
    // 组件挂载和每次组件更新都会执行
    render() {
    console.log('创建组件的render第三个执行,render');
        return (
            <div>
                <div>
                    <input value={this.state.text} onChange={(e) => {
                        this.setState({
                            text: e.currentTarget.text
                        })
                    }}/>
                </div>
            </div>
        )
    }
}
export default TestLive;

从以上的注释部分可以看到componentWillMount和componentWillUpdate在17版本将会被移除,既然要被移除肯定使用原因的,这里的原因是:在未来的17版本会使用异步渲染,这样在componentWillMount和componentWillUpdate做某些操作的时候,就会产生bug!相应的,react在17版本也给增加了static getDervicedStateFromProps(nextProps,pervState)和getSnapshotBeforeUpdate()生命周期函数