React 组件生命周期与 Hooks 简明指南

在这里插入图片描述

文章目录

      • 一、类组件的生命周期方法
        • 1. 挂载阶段
        • 2. 更新阶段
        • 3. 卸载阶段
      • 二、函数组件中的 Hooks
        • 1. useState
        • 2. useEffect
        • 3. useContext
        • 4. useReducer
      • 结论


好的,我们来详细讲解一下 React 类组件的生命周期方法和函数组件中的钩子(hooks)。

一、类组件的生命周期方法

React 类组件有几个重要的生命周期方法,这些方法可以让开发者在组件的不同阶段执行特定的代码。生命周期分为三个主要阶段:挂载、更新和卸载。

1. 挂载阶段

在组件创建并插入 DOM 中时,会依次调用以下方法:

  • constructor(props):

    • 构造函数,用于初始化状态和绑定事件处理方法。
    • 示例:
      class MyComponent extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}
      }
      
  • static getDerivedStateFromProps(nextProps, prevState):

    • 在渲染之前调用,可以根据 props 更新 state。
    • 返回一个对象以更新 state,或者返回 null 表示不更新。
    • 示例:
      static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.value !== prevState.value) {return { value: nextProps.value };}return null;
      }
      
  • render():

    • 必须实现的方法,返回要渲染的元素。
    • 示例:
      render() {return <h1>{this.state.count}</h1>;
      }
      
  • componentDidMount():

    • 组件挂载后立即调用,可以进行网络请求或添加订阅等操作。
    • 示例:
      componentDidMount() {fetchData().then(data => this.setState({ data }));
      }
      
2. 更新阶段

当组件的 state 或 props 发生变化时,会触发更新,调用以下方法:

  • static getDerivedStateFromProps(nextProps, prevState):

    • 同上,在组件更新前被调用。
  • shouldComponentUpdate(nextProps, nextState):

    • 返回一个布尔值,决定组件是否重新渲染。用于优化性能。
    • 示例:
      shouldComponentUpdate(nextProps, nextState) {return nextProps.value !== this.props.value;
      }
      
  • render():

    • 同上,返回要渲染的元素。
  • getSnapshotBeforeUpdate(prevProps, prevState):

    • 在最近一次渲染输出(提交)到 DOM 之前调用,可以捕获一些信息(如滚动位置),并将其返回给 componentDidUpdate
    • 示例:
      getSnapshotBeforeUpdate(prevProps, prevState) {return this.listRef.scrollTop;
      }
      
  • componentDidUpdate(prevProps, prevState, snapshot):

    • 组件更新后调用,可以用来处理副作用,例如根据更新后的 props 发送网络请求。
    • 示例:
      componentDidUpdate(prevProps, prevState, snapshot) {if (this.props.value !== prevProps.value) {// 处理更新}
      }
      
3. 卸载阶段

当组件从 DOM 中移除时,调用以下方法:

  • componentWillUnmount():
    • 用于清理,比如取消订阅、清除定时器等。
    • 示例:
      componentWillUnmount() {clearTimeout(this.timer);
      }
      

二、函数组件中的 Hooks

React 16.8 引入了 Hooks,使得函数组件也能拥有类组件的状态和生命周期功能。

1. useState
  • 用于在函数组件中添加状态。
  • 示例:
    const [count, setCount] = useState(0);
    
2. useEffect
  • 用于处理副作用,相当于类组件中的 componentDidMount, componentDidUpdatecomponentWillUnmount
  • 示例:
    useEffect(() => {// 组件挂载或更新时执行return () => {// 组件卸载时执行};
    }, [dependencies]); // 依赖数组,变化时重新执行 effect
    
3. useContext
  • 用于在函数组件中访问 React 上下文。
  • 示例:
    const value = useContext(MyContext);
    
4. useReducer
  • 用于管理复杂状态逻辑,类似于 Redux 的 reducer。
  • 示例:
    const [state, dispatch] = useReducer(reducer, initialState);
    

结论

React 的生命周期方法和 Hooks 使得组件能够在不同阶段执行特定操作。类组件通过生命周期方法管理状态和副作用,而函数组件通过 Hooks 提供了更简洁的方式来处理状态和副作用。掌握这些概念可以帮助开发者更高效地构建和维护 React 应用。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/464778.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考(中级-软件设计师)数据库篇(1101)

第6章 数据库系统基础知识 一、基本概念 1、数据库 数据库&#xff08;Database &#xff0c;DB&#xff09;是指长期存储在计算机内的、有组织的、可共享的数据集合。数据库中的数据按一定的数据模型组织、描述和存储&#xff0c;具有较小的冗余度、较高的数据独立性和扩展…

FITS论文解析

在本文中&#xff0c;作者探讨了如何将复杂的频域特征提取与简单的线性模型&#xff08;如DLinear&#xff09;结合&#xff0c;以优化时间序列预测任务的效率和解释性。本文的核心思想是利用频域处理和DLinear的简化结构来达到高效的预测能力&#xff0c;同时保留对复杂特征的…

Ubuntu 搭建Yapi服务

新手上路&#xff0c;小心开车 1. 安装mongo数据库 第一步&#xff1a;docker pull mongo 拉取mongo镜像&#xff1b; 第二步&#xff1a;启动mongo镜像 docker network create yapi_networkdocker run -d \-p 27017:27017 \--name mongodb \-e MONGO_INITDB_ROOT_USERNAMEya…

【进度猫-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

JAVA 插入 JSON 对象到 PostgreSQL

博主主页:【南鸢1.0】 本文专栏&#xff1a;JAVA 目录 ​编辑 简介 所用&#xff1a; 1、 确保 PostgreSQL 数据库支持 JSON&#xff1a; 2、添加 PostgreSQL JDBC 驱动 3、安装和运行 PostgreSQL 4、建立数据库的连接 简介 在现代软件开发中&#xff0c;由于 JSON 数据…

前端通过nginx部署一个本地服务的方法

前端通过nginx部署一个本地服务的方法&#xff1a; 1.下载ngnix nginx 下载完成后解压缩后运行nginx.exe文件 2.打包你的前端项目文件 yarn build 把生成的dist文件复制出来&#xff0c;替换到nginx的html文件下 3.配置conf目录的nginx.conf文件 主要配置server监听 ser…

深度学习基础知识-损失函数

目录 1. 均方误差&#xff08;Mean Squared Error, MSE&#xff09; 2. 平均绝对误差&#xff08;Mean Absolute Error, MAE&#xff09; 3. Huber 损失 4. 交叉熵损失&#xff08;Cross-Entropy Loss&#xff09; 5. KL 散度&#xff08;Kullback-Leibler Divergence&…

如何在BSV区块链上实现可验证AI

​​发表时间&#xff1a;2024年10月2日 nChain的顶尖专家们已经找到并成功测试了一种方法&#xff1a;通过区块链技术来验证AI&#xff08;人工智能&#xff09;系统的输出结果。这种方法可以确保AI模型既按照规范运行&#xff0c;避免严重错误&#xff0c;遵守诸如公平、透明…

网络原理(应用层)->HTTPS解

前言&#xff1a; 大家好我是小帅&#xff0c;今天我们来了解HTTPS, 个人主页&#xff1a;再无B&#xff5e;U&#xff5e;G 文章目录 1.HTTPS1.1HTTPS 是什么&#xff1f;1.2 "加密" 是什么1.3 HTTPS 的⼯作过程1.3. 1对称加密1.3.2⾮对称加密 1.4中间人攻击1.5 证书…

TOEIC 词汇专题:娱乐休闲篇

TOEIC 词汇专题&#xff1a;娱乐休闲篇 在娱乐和休闲活动中&#xff0c;我们会接触到许多特定的词汇。这些词汇涉及到活动入场、观众互动、评论等各个方面&#xff0c;帮助你在相关场景中更加自如。 1. 入场和观众 一些常用词汇帮助你轻松应对观众与入场管理相关的场景&#…

Spring框架---AOP技术

AOP概念的引入 第一步创建普通Maven项目 导入依赖 <dependencies><!--spring的核心--><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.0.2.RELEASE</version&g…

双指针算法篇——一快一慢须臾之间解决问题的飘逸与灵动(2)

前言&#xff1a; 上篇我们讲解了双指针算法的含义以及相关题型讲解&#xff0c;本次则趁热打铁&#xff0c;通过进阶题目的分析与讲解&#xff0c;促使我们更深入和灵活的理解运用双指针算法。 相关题目及讲解 一. 盛最多水的容器 题目链接&#xff1a;11. 盛最多水的容器 -…

koa项目实战 == 实现注册登录鉴权

一. 项目的初始化 1 npm 初始化 npm init -y生成package.json文件: 记录项目的依赖 2 git 初始化 git init生成’.git’隐藏文件夹, git 的本地仓库 3 创建 ReadMe 文件 二. 搭建项目 1 安装 Koa 框架 npm install koa2 编写最基本的 app 创建src/main.js const Koa…

ONLYOFFICE 文档8.2更新评测:PDF 协作编辑、性能优化及更多新功能体验

文章目录 &#x1f340;引言&#x1f340;ONLYOFFICE 产品简介&#x1f340;功能与特点&#x1f340;体验与测评ONLYOFFICE 8.2&#x1f340;邀请用户使用&#x1f340; ONLYOFFICE 项目介绍&#x1f340;总结 &#x1f340;引言 在日常办公软件的选择中&#xff0c;WPS 和微软…

MATLAB下的四个模型的IMM例程(CV、CT左转、CT右转、CA四个模型),附下载链接

基于IMM算法的目标跟踪。利用卡尔曼滤波和多模型融合技术&#xff0c;能够在含噪声的环境中提高估计精度&#xff0c;带图像输出 文章目录 概述源代码运行结果代码结构与功能1. 初始化2. 仿真参数设置3. 模型参数设置4. 生成量测数据5. IMM算法初始化6. IMM迭代7. 绘图8. 辅助函…

Segmentation fault 问题解决

问题描述 执行有import torch代码的py 文件报Segmentation fault 原因分析&#xff1a; 查了网上说的几种可能性 import torch 时出现 “Segmentation fault” 错误&#xff0c;通常表示 PyTorch 的安装或配置存在问题 可能的原因 不兼容的库版本: PyTorch、CUDA 或其他依赖…

如何搭建汽车行业AI知识库:定义+好处+方法步骤

在汽车行业&#xff0c;大型车企面临着员工众多、价值链长、技术密集和知识传播难等挑战。如何通过有效的知识沉淀与应用&#xff0c;提升各部门协同效率&#xff0c;快速响应客户咨询&#xff0c;降低销售成本&#xff0c;并开启体系化、可持续性的知识管理建设&#xff0c;成…

QGIS:HCMGIS插件

插件GitHub地址&#xff1a;https://github.com/thangqd/HCMGIS。 以下对HCMGIS插件进行简单介绍&#xff0c;并演示如何进行地图数据下载。 插件简介 HCMGIS - Basemaps, Download OpenData, Batch Converter, VN-2000 Projections, and Field Calculation Utilities for QGI…

SpringBoot集成Shiro+Jwt+Redis

1. 概述 首先需要知道为什么使用 ShiroJwtRedis 进行登录认证和权限控制。 1. 为什么用Shiro&#xff1f; 主要用的是 shiro 的登录认证和权限控制功能。 Shiro 参见本栏目文章 &#x1f343;《Shiro实战》 2. 为什么用Jwt&#xff1f; Shiro 默认的 Session 机制来帮助实现…

jenkins 构建报错 Cannot run program “sh”

原因 在 windows 操作系统 jenkins 自动化部署的时候, 由于自动化构建的命令是 shell 执行的,而默认windows 从 path 路径拿到的 shell 没有 sh.exe &#xff0c;因此报错。 解决方法 前提是已经安装过 git WINR 输入cmd 打开命令行, 然后输入where git 获取 git 的路径, …