React 的生命周期方法有哪些?

news/2024/8/26 7:53:24 标签: 前端, javascript, react.js

React 16.3 之后,React 的生命周期方法经历了一些改变。以下是 React 类组件中常用的生命周期方法:


    挂载阶段(Mounting):
        constructor(): 构造函数,在组件被创建时调用,用于初始化 state 和绑定方法。
        static getDerivedStateFromProps(): 从 props 中派生 state,在组件实例化和接收新 props 时调用。
        render(): 渲染方法,返回要渲染的 React 元素。
        componentDidMount(): 组件挂载后调用,通常用于发送网络请求或操作 DOM。


更新阶段(Updating):
        static getDerivedStateFromProps(): 从 props 中派生 state,在接收新 props 时调用。
        shouldComponentUpdate(): 决定是否重新渲染组件,在接收新 props 或 state 时调用。
        render(): 渲染方法,返回要渲染的 React 元素。
        getSnapshotBeforeUpdate(): 在更新 DOM 之前获取 DOM 信息,在更新之前调用。
        componentDidUpdate(): 组件更新后调用,通常用于更新 DOM 或执行其他副作用。


卸载阶段(Unmounting):
        componentWillUnmount(): 组件卸载前调用,通常用于清理定时器或取消网络请求。
    错误处理阶段(Error Handling):
        static getDerivedStateFromError(): 在子组件抛出错误时调用,用于更新 state 以渲染备用 UI。
        componentDidCatch(): 在子组件抛出错误后调用,用于记录错误信息或发送错误报告。


    需要注意的是,React 17 中已经废弃了一些生命周期方法,如 componentWillMount、componentWillReceiveProps 等。建议在开发时使用新的生命周期方法,以确保代码的兼容性和可维护性。


http://www.niftyadmin.cn/n/5558221.html

相关文章

spring-boot2.x整合Kafka步骤

1.pom依赖添加 <properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</ma…

英语语法第二课之简单句

简单句一共分为 1、陈述句 2、疑问句 3、感叹句 4、祈使句 下面根据这4类进行讲解 1、陈述句 1.1、陈述句的两种形式 肯定式 I have money 肯定变否定的方式&#xff0c; 助动词&#xff08;do&#xff09;后面加否定词&#xff08;not&#xff09; 否定式 I don’t …

环境配置|PyCharm——Pycharm本地项目打包上传到Github仓库的操作步骤

一、Pycharm端的设置操作 通过Ctrl+Alt+S快捷组合键的方式,打开设置,导航到版本控制一栏中的Git,在Git可执行文件路径中,输入Git.exe。 按照下图顺序,依次点击,完成测试。输出如图标④的结果,即可完成测试。 输出下图结果,配置Git成功,如本地未安装Git,需自行安装。

JavaWeb-【2】CSS和JavaScript

笔记系列持续更新,真正做到详细!!本次系列重点讲解后端,那么第一阶段先讲解前端【续上篇HTML】 目录 一、CSS 1、CSS介绍 2、CSS快速入门 3、CSS语法 4、字体颜色和边框 5、背景颜色和字体样式 6、div和文本居中 7、超链接去下划线和表格细线 8、无序列表去掉样式…

Springboot 3.x - Reactive programming (2)

三、WebFlux Blocking Web vs. Reactive Web Blocking Web (Servlet) and Reactive Web (WebFlux) have significant differences in several aspects. 1. Front Controller Servlet-Blocking Web: Uses DispatcherServlet as the front controller to handle all HTTP req…

前端学习常用技术栈

前端基础&#xff1a;HTML、CSS、JavaScript 前端高级&#xff1a;HTML5、CSS3、JavaScript 语法规范&#xff1a;TypeScript、ECMAScrpit、Eslint、Prettier 前端热门框架&#xff1a;Vue.js、React.js、Angular.js、Bootstrap、Nuxt.js、Svelte.js、Solid.js、Preact.js、Tai…

Docker缩小镜像体积与搭建LNMP架构

镜像加速地址 {"registry-mirrors": ["https://docker.m.daocloud.io","https://docker.1panel.live"] } daemon.json 配置文件里面 bip 配置项中可以配置docker 的网段 {"graph": "/data/docker", #数据目录&#xff0…

认识sm1,sm2,sm3,sm4以及如何在Node.js实现

概述 国密即国家密码局认定的国产密码算法。主要有SM1&#xff0c;SM2&#xff0c;SM3&#xff0c;SM4。密钥长度和分组长度均为128位。 国密算法是指国家密码管理局认定的一系列国产密码算法&#xff0c;包括SM1-SM9以及ZUC等。其中 SM1、SM4、SM5、SM6、SM7、SM8、ZUC等属于…