后端程序员入门react笔记——react的生命周期(二)

React常用的钩子函数

constructor

这个函数我们太常见了,在初始化类的state的时候,或者初始化类的props的时候都会用到,就是一个类的构造函数。对后端人员来说很熟悉

js 复制代码
    constructor() {
        super();
        this.state = {
            age: 18
        }
    }

getDerivedStateFromProps

getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。这个生命周期的意思就是从props中获取state,这个生命周期的功能实际上就是将传入的props映射到state上面。这个函数有两个参数, 第一个参数为即将更新的 props, 第二个参数为上一个状态的 state , 可以比较props 和 state来加一些限制条件,防止无用的state更新。这个函数将替代componentWillReceiveProps

js 复制代码
    static getDerivedStateFromProps(nextProps,prevState){
        return nextProps
    }

render

render是渲染视图的,当所有组件完成初始化,render会调用一次,渲染dom;当state发生变化的时候,render会重新渲染视图,再次被调用。注意render必须有返回值,可以是null。

js 复制代码
    render() {
        return (
            <button>点击我</button>
        )
    }

componentDidMount

当所有组件挂载到页面上,在render执行前,会执行一次,状态更新不会触发。

js 复制代码
    componentDidMount() {//挂载完毕出发
        console.log("组件挂载完毕了",this.state.age)
    }

我们写一个定时器,定时更次年state的状态,看看会不会触发componentDidMount

js 复制代码
    class Hello extends React.Component {
    b1 = createRef()
    state = {
        age: 18
    }
    componentDidMount() {//挂载完毕出发
        console.log("组件挂载完毕了",this.state.age)
    }
    ageAdd=()=>{
        setInterval(()=>{
            this.setState({age:this.state.age+1})
        },1000)
    }
    render() {
        return (
            <ul>
                <li>age :{this.state.age}</li>
                <button onClick={this.ageAdd}>自动+1</button>
            </ul>

        )
    }
}

componentWillUnmount

既然开启了定时器,那么我们就得有让定时器停止的时机,比如componentWillUnmount,它是在组件将要被移出页面的时候触发,和上面的mount是相反的。主要用于消除计时器,ajax请求,取消监听,因为如果销毁后不删除的话,会继续占用内存。比如前面代码,我想让页面加载完毕后自动触发+1操作,删除加1按钮后停止+1操作。

js 复制代码
import React, {createRef} from "react";
import {root} from "./index";

class Hello extends React.Component {
    b1 = createRef()
    state = {
        age: 18,
        timerId:0
    }
    componentDidMount() {//挂载完毕出发
        this.ageAdd()
    }
    componentWillUnmount() {//卸载组件
        console.log("组件被卸载了");
        clearInterval(this.state.timerId)//停止定时器
    }

    delAdd=()=>{
        root.unmount()
    }
    ageAdd=()=>{
       let timerId= setInterval(()=>{
            this.setState({age:this.state.age+1})
        },1000)
        this.setState({timerId:timerId})
    }
    render() {
        return (
            <ul>
                <li>age :{this.state.age}</li>
                <button>自动+1</button>
                <button onClick={this.delAdd}>game over</button>
            </ul>
        )
    }
}

shouldComponentUpdate

视图更新后执行的函数,比如还是刚才那个计时器,我们看看年龄+1后会不会触发,注意这个函数应该有一个返回值,返回true or false

js 复制代码
    shouldComponentUpdate(){
        console.log("组件即将更新",this.state.age);
        return true
    }

getSnapshotBeforeUpdate

它的核心作用就是在render改变dom之前,记录更新前的dom信息传递给componentDidUpdate,在render之前调用。将替换componentWillUpdate,通常情况下,getSnapshotBeforeUpdate方法会返回一个值,这个值会作为第三个参数传递给componentDidUpdate方法。返回值snapshot会作为参数传递给componentDidUpdate

js 复制代码
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("原来的props和state",prevProps,prevState);
        return true
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("组件更新了",prevProps,prevState,snapshot);
    }

componentDidUpdate

视图更新后调用,如果shouldComponentUpdate 返回了false,将不会被调用

js 复制代码
    componentDidUpdate() {
        console.log("组件更新了");
    }

调用顺序

接下来我们看看钩子函数

  • 首次执行,肯定是先构造函数constructor,这个毋庸置疑。然后由render取创建虚拟dom,虚拟dom创建完毕后,唤起componentDidMount。
  • 数据更新阶段,先执行shouldComponentUpdate函数,根据返回值false or true来判断是否执行render函数重新渲染视图,render更新视图之后调用componentDidUpdate

各个函数的生命周期和调用顺序

相关推荐
科技探秘人2 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR8 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香10 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969312 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai18 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91527 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
咔叽布吉30 分钟前
【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection
论文阅读·笔记·目标检测
johnny23331 分钟前
《大模型应用开发极简入门》笔记
笔记·chatgpt
亦枫Leonlew33 分钟前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节