React的生命周期函数详解

什么是生命周期

所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数

生命周期有哪些

1. 更新阶段

static getDerivedStateFromProps(props, state)

该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

    static getDerivedStateFromProps(props, state){
        console.log("sonApp.js第一步父组件的值更新了")
        return state
    }

shouldComponentUpdate(nextProps, nextState)

发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数

    // 是否要更新数据，这里返回true才会更新数据
    shouldComponentUpdate(nextProps,nextState){
        console.log("sonApp.js第二步：这里判断是否要更新数据")
        console.log(nextProps)  // 父组件传给子组件的值，这里没有会显示空
        console.log(nextState)  // 数据更新后的值
        return true             // 返回true，确认更新
    }

render

组件生命周期渲染阶段执行的函数

    render(){
        console.log("sonApp.js第三步：数据渲染render")
        return (
            <div>
                {this.props.value}
            </div>
        )
    }

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作为参数传递给下个生命周期函数componentDidUpdate该函数并不常用。

    getSnapshotBeforeUpdate(prevProps, prevState){ 
        console.log("sonApp.js第四步：完成渲染即将被挂载在DOM中");
        return 11;
    }

componentDidUpdate()

该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作

    componentDidUpdate(){
        console.log("sonApp.js第五步：组件更新完成")
    }

整体代码组成更新阶段

import React,{Component} from "react";
import SonApp from './sonApp'

class App extends Component{
    state={
		hobby:'爱吃很多好吃的'
    }

    // 是否要更新数据，这里返回true才会更新数据
    shouldComponentUpdate(nextProps,nextState){
        console.log("app.js第一步：这里判断是否要更新数据")
        console.log(nextProps)  // 父组件传给子组件的值，这里没有会显示空
        console.log(nextState)  // 数据更新后的值
        return true             // 返回true，确认更新
    }

    // 更新数据时触发的生命周期函数
    componentDidUpdate(){
        console.log("app.js第四步：组件更新完成")
    }

    // 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了，不过还有修改文档，你可以在这里去获取更新之前的文档
    getSnapshotBeforeUpdate(){
        console.log("app.js第四步：完成渲染即将被挂载在DOM中")
        return 11
    }

    setData = ()=>{
        this.setState({hobby:"你是猪吗？？？"})
    }

    render(){
        console.log("app.js第三步：数据渲染render")
        return (
                <div>
                    {this.state.hobby}
                    <button onClick={this.setData}>点击更新数据</button>
                    <SonApp value={this.state.hobby}></SonApp>
                </div>
        )
    };
}

export default App;

浏览器反馈

2. 挂载阶段

constructor(props)

类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作

• 初始化 state
• 处理事件绑定函数的 this(之前有过一篇React踩坑系列，其中的this指向就有用的这里去处理)

    constructor(props){
        super(props)
        console.log("第一步：构造函数")
    }

render

组件生命周期渲染阶段执行的函数

    render(){
        console.log("第三步：渲染render")
        return (
                <div>
                    我喜欢吃各种口味的广式月饼，除了水果味的！！！
                </div>
        )
    };

static getDerivedStateFromProps(props, state)

该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

    static getDerivedStateFromProps(props, state){
        console.log(props); // 接收到父组件传递过来的新的props
        console.log(state); // 组件当前的数据
        console.log("第二步：组件将要挂载");
        return state;   // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.
    }

componentDidMount()

在组件挂载后调用

    componentDidMount(){
        console.log("第四步：组件挂载完成")
    }

整体代码组成组件加载阶段

import React,{Component} from "react";

class App extends Component{
    constructor(props){
        super(props)
        console.log("第一步：构造函数")
    }
    state={
		hobby:'爱吃很多好吃的'
    }

    /**
     * 每次组件渲染前被调用,该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，
     * 它的存在只有一个目的：让组件在 props 变化时更新 state
     * */ 
    static getDerivedStateFromProps(props, state){
        console.log(props); // 接收到父组件传递过来的新的props
        console.log(state); // 组件当前的数据
        console.log("第二步：组件将要挂载");
        return state;   // 用户需要在这个函数中返回一个对象, 它将作为 setState() 中的 Updater 更新组件.
    }

    // 组件挂在完成时触发的生命周期函数
    componentDidMount(){
        console.log("第四步：组件挂载完成")
    }

    render(){
        console.log("第三步：渲染render")
        return (
                <div>
                    我喜欢吃各种口味的广式月饼，除了水果味的！！！
                </div>
        )
    };
}

export default App;

浏览器反馈

3. 销毁阶段

componentWillUnmount()

该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

    componentWillUnmount(){
        console.log("sonApp.js组件被销毁")
    }

完整版销毁组件代码

父组件
import React,{Component} from "react";
import SonApp from './sonApp'

class App extends Component{
    state={
		hobby:true
    }

    setData = ()=>{
        this.setState({hobby:!this.state.hobby})
    }

    render(){
        return (
                <div>
                    <button onClick={this.setData}>点击挂载或销毁组件</button>
                    {
                        this.state.hobby ? <SonApp></SonApp> : null
                    }
                </div>
        )
    };
}

export default App;

子组件
import React,{Component} from "react";

export default class SonApp extends Component {

    // 组件要被销毁时执行的生命周期函数
    componentWillUnmount(){
        console.log("sonApp.js组件被销毁")
    }

    render(){
        return (
            <div>
                我是一条酸菜鱼
            </div>
        )
    }
}

浏览器反馈