后端程序员入门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

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

相关推荐
-一杯为品-26 分钟前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome