当前位置: 首页 > news >正文

React 中的常见 API 和生命周期函数

目录

  • useState
  • useEffect
  • useRef
  • dangerouslySetInnerHTML
  • 生命周期函数
    • constructor
    • componentDidMount
    • static getDerivedStateFromProps
    • shouldComponentUpdate
    • componentDidUpdate
    • componentWillUnmount

useState

useState 是 React 的一个 Hook,用于在函数组件中添加状态。通过 useState,我们可以在函数组件中创建和管理状态变量,每当状态变量更新时,组件将重新渲染以显示最新的状态。

useEffect

useEffect 是 React 的另一个 Hook,用于处理副作用。副作用是指在组件渲染过程中可能产生的任何操作,例如访问 DOM、发起网络请求、订阅事件等。通过 useEffect,我们可以在组件渲染后执行这些操作。

useRef

useRef 用于在函数组件中创建可变的引用。它提供了一个持久的引用,使我们可以在多次渲染之间存储和访问数据。在上面的例子中,我们使用 useRef 创建了 divRef、inputRef 和 buttonRef,分别引用了 div、input 和 button 元素。

代码示例

import {Ref, useEffect, useRef} from "react";
// @ts-ignore
import React from "react";const Demo=React.forwardRef((props:any,ref:Ref<HTMLInputElement>)=>{return (<><input type="text" ref={ref}/></>)
})
function Contact() {const divRef=useRef<HTMLDivElement>(null);const inputRef=useRef<HTMLInputElement>(null);const buttonRef=useRef<HTMLButtonElement>(null);useEffect(()=>{console.log(inputRef.current)if(inputRef.current) {inputRef.current.focus()}console.log(buttonRef.current)})function changeContent(){if(divRef.current){divRef.current.innerHTML="<h1>hello</h1>"}}return (<div><h1>Contact</h1><br/><Demo ref={inputRef}/><button onClick={()=>{if(inputRef.current){inputRef.current.focus()}}}>focus</button><div ref={divRef} onClick={changeContent}>click</div><div dangerouslySetInnerHTML={{__html:"<h1>hekko</h1>"}}></div><input type="text" ref={inputRef}/><button ref={buttonRef}>button</button></div>);
}
export default Contact;

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 中的一个属性,用于将 HTML 字符串插入到组件中。它提供了一种绕过 React 的默认转义机制的方法,但也带来了潜在的安全风险,因此应该谨慎使用。

生命周期函数

constructor

这是组件的构造函数,在组件创建时被调用。在 constructor 中,我们通常进行一些初始化操作,如设置初始状态,绑定事件处理函数等。在构造函数中,可以通过 this.state 初始化组件的状态。

componentDidMount

这是组件的生命周期函数,在组件渲染完成后被调用。在 componentDidMount 中,我们通常进行一些异步操作,如数据请求、订阅事件等。在该函数中,可以修改组件的状态,这将导致组件重新渲染。

static getDerivedStateFromProps

这是一个静态函数,用于根据传入的 props 和当前的 state 计算并返回一个新的 state。getDerivedStateFromProps 在组件创建和更新时都会被调用,用于根据传入的 props 更新组件的状态。

shouldComponentUpdate

这是一个生命周期函数,用于判断组件是否需要重新渲染。在 shouldComponentUpdate 中,我们可以根据传入的 nextProps 和 nextState 来决定是否重新渲染组件。如果返回 true,则组件将重新渲染;如果返回 false,则组件不会重新渲染。

componentDidUpdate

这是组件的生命周期函数,在组件更新后被调用。在 componentDidUpdate 中,我们通常进行一些副作用操作,如更新 DOM、请求数据等。在该函数中,可以根据 prevProps 和 prevState 来进行一些条件判断,执行相应的操作。

componentWillUnmount

这是组件的生命周期函数,在组件即将卸载时被调用。在 componentWillUnmount 中,我们通常进行一些清理操作,如取消订阅、清除定时器等。在该函数中,应该避免执行 setState 操作,因为组件即将卸载,不再需要更新状态。

以上是 React 中常见的一些 API 和生命周期函数的介绍。通过合理地使用这些 API 和生命周期函数,我们可以更加灵活和高效地构建 React 应用。但需要注意的是,随着 React 的不断发展,一些生命周期函数可能会被废弃或替代,请根据具体的 React 版本和需求做出相应的选择。希望本篇博客对你在学习和使用 React 中有所帮助!

代码示例:

import {Component} from "react";
import {Button} from "antd";interface IState{counter:number
}
export default class Index extends Component <any,any>{constructor(props: any, context: any) {super(props, context);this.state={counter:0}console.log("constructor")}componentDidMount() {console.log("componentDidMount")}static getDerivedStateFromProps(props: any, state: any) {console.log("getDerivedStateFromProps")return null}shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean {console.log("shouldComponentUpdate")return nextState.counter!<=5}add=()=>{this.setState({counter:this.state.counter+1})}componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any) {console.log("componentDidUpdate")}componentWillUnmount() {console.log("componentWillUnmount")}render(){console.log("render")return(<><div>{this.state.counter}</div><Button onClick={this.add}>add</Button></>)}
}

相关文章:

React 中的常见 API 和生命周期函数

目录 useStateuseEffectuseRefdangerouslySetInnerHTML生命周期函数 constructorcomponentDidMountstatic getDerivedStateFromPropsshouldComponentUpdatecomponentDidUpdatecomponentWillUnmount useState useState 是 React 的一个 Hook&#xff0c;用于在函数组件中添加…...

神经网络中遇到的 python 函数(Pytorch)

1.getattr() 函数用于返回一个对象属性值。 def getattr(object, name, defaultNone): # known special case of getattr"""getattr(object, name[, default]) -> valueGet a named attribute from an object; getattr(x, y) is equivalent to x.y.When a …...

分布式事务及解决方案

1、分布式事务 分布式事务就是在一个交易中各个服务之间的相互调用必须要同时成功或者同时失败&#xff0c;保持一致性和可靠性。在单体项目架构中&#xff0c;在多数据源的情况下也会发生 分布式事务问题。本质上来说&#xff0c;分布式事务就是为了保证不同数据库的数据一致性…...

【宏定义】——编译时校验

文章目录 编译时校验功能描述代码实现示例代码正常编译示例编译错误示例预处理之后的结果 代码解析!!estruct {int:-!!(e); }sizeof(struct {int:-!!(e); }) 参考代码 编译时校验 功能描述 用于在编译时检查一个条件是否为真&#xff0c;如果条件为真则会编译失败&#xff0c…...

C#学习系列之System.Windows.Data Error: 40报错

C#学习系列之System.Windows.Data Error: 40报错 前言报错内容解决总结 前言 在用户界面使用上&#xff0c;代码运行没有问题&#xff0c;但是后台报错&#xff0c;仔细研究了报错内容&#xff0c;解决问题&#xff0c;所以记录一下。 报错内容 System.Windows.Data Error: 4…...

【java安全】RMI

文章目录 【java安全】RMI前言RMI的组成RMI实现Server0x01 编写一个远程接口0x02 实现该远程接口0x03 Registry注册远程对象 Client 小疑问RMI攻击 【java安全】RMI 前言 RMI全称为&#xff1a;Remote Method Invocation 远程方法调用&#xff0c;是java独立的一种机制。 RM…...

rcu链表综合实践

基础知识 rcu-read copy update的缩写。和读写锁起到相同的效果。据说牛逼一点。对于我们普通程序员&#xff0c;要先学会使用&#xff0c;再探究其内部原理。 链表的数据结构&#xff1a; struct list_head {struct list_head *next, *prev; };还有一种&#xff1a;struct h…...

odoo16-python框架-动作

总结 1 模型和视图的 设计之美 view_ids, view_id,view_mode 最终目的都是为了生成views, 也就是视图. 模型是死的,像男人,一成不变 视图像女人,千变万化, 姿态万千 一阴一阳之谓道,设计之美又在这里得到了体现 2 所有的动作都可以通过web界面来配置 可以通过在"设…...

微信小程序——同一控件的点击与长按事件共存的解决方案

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

selenium自动化-获取元素属性信息

在写自动化过程中我们会想验证自己的代码是否正确&#xff0c;比如登录之后&#xff0c;通过用户名或其他信息来证明你登录成功&#xff0c;或者点击链接后&#xff0c;是否会跳转新的页面。通过获取元素属性信息&#xff0c;可以解决我们的疑惑。 一、获取内容对象的内容信息 …...

LabVIEW开发小型减阻试验平台

LabVIEW开发小型减阻试验平台 湍流摩擦在粘性流体的阻力中起着重要作用&#xff0c;减少湍流摩擦是流体力学领域的热门话题之一。在油气管道的长距离流体输送中&#xff0c;泵站提供的几乎所有动力都用于克服流体的胫骨摩擦。在流体输送领域&#xff0c;船舶的蒙皮摩擦阻力占总…...

解决分类任务中数据倾斜问题

大家好&#xff0c;在处理文本分类任务时&#xff0c;基准测试流行的自然语言处理架构的性能是建立对可用选项的理解的重要步骤。在这里&#xff0c;本文将深入探讨与分类相关的最常见的挑战之一——数据倾斜。如果你曾经将机器学习&#xff08;ML&#xff09;应用于真实世界的…...

Vue3 word如何转成pdf代码实现

&#x1f642;博主&#xff1a;锅盖哒 &#x1f642;文章核心&#xff1a;word如何转换pdf 目录 1.前端部分 2.后端部分 在Vue 3中&#xff0c;前端无法直接将Word文档转换为PDF&#xff0c;因为Word文档的解析和PDF的生成通常需要在后端进行。但是&#xff0c;你可以通过Vu…...

fpga--流水灯

fpga流水灯的设计 思路&#xff1a;外部时钟频率50mhz&#xff0c;若要实现每隔0.5s闪烁一次&#xff0c;则使用内部计数器计数到24999999拉高一个周期电平&#xff0c;当电平被拉高的时候&#xff0c;进行LED灯电平的设置&#xff0c;每次检测到高电平&#xff0c;就进行一位…...

51单片机:数码管和矩阵按键

目录 一:动态数码管模块 1:介绍 2:共阴极和共阳极 A:共阴极 B:共阳极 C:转化表 3:74HC138译码器 4:74HC138译码器控制动态数码管 5:数码管显示完整代码 二:矩阵按键模块 1:介绍 2:原理图 3:矩阵按键代码 一:动态数码管模块 1:介绍 LED数码管&#xff1a;数码管是一种…...

Django + Xadmin 数据列表复选框显示为空,怎么修复这个问题?

问题描述&#xff1a; 解决方法&#xff1a; 后续发现的报错&#xff1a; 解决方案&#xff1a; 先根据报错信息定位到源代码&#xff1a; 在该文件顶部写入&#xff1a; from django.core import exceptions然后把&#xff1a; except models.FieldDoesNotExist修改为&…...

《向量数据库指南》——Milvus Cloud2.2.12 易用性,可视化,自动化大幅提升

Milvus Cloud又迎版本升级,三大新特性全力加持,易用性再上新台阶! 近期,Milvus Cloud上线了 2.2.12 版本,此次更新不仅一次性增加了支持 Restful API、召回原始向量、json_contains 函数这三大特性,还优化了 standalone 模式下的 CPU 使用、查询链路等性能,用一句话总…...

Python web实战 | 用 Flask 框架快速构建 Web 应用【实战】

概要 Python web 开发已经有了相当长的历史&#xff0c;从最早的 CGI 脚本到现在的全栈 Web 框架&#xff0c;现在已经成为了一种非常流行的方式。 Python 最早被用于 Web 开发是在 1995 年&#xff08;90年代早期&#xff09;&#xff0c;当时使用 CGI 脚本编写动态 Web 页面…...

十、数据结构——链式队列

数据结构中的链式队列 目录 一、链式队列的定义 二、链式队列的实现 三、链式队列的基本操作 ①初始化 ②判空 ③入队 ④出队 ⑤获取长度 ⑥打印 四、循环队列的应用 五、总结 六、全部代码 七、结果 在数据结构中&#xff0c;队列&#xff08;Queue&#xff09;是一种常见…...

Improving Cross-Modal Retrieval with Set of Diverse Embeddings

框架图&#xff1a; Using Triplet Loss: Smooth-Chamfer similarity Using Log-Sum-Exp,...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...