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></>)}
}

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

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

相关文章

iOS开发-格式化时间显示刚刚几分钟前几小时前等

iOS开发-格式化时间显示刚刚几分钟前几小时前等 在开发中经常遇到从服务端获取的时间戳&#xff0c;需要转换显示刚刚、几分钟前、几小时前、几天前、年月日等格式。 主要用到了NSCalendar、NSDateComponents这两个类 NSString *result nil;NSCalendarUnit components (NSC…

【后端面经】微服务构架 (1-6) | 隔离:如何确保心悦会员体验无忧?唱响隔离的鸣奏曲!

文章目录 一、前置知识1、什么是隔离?2、为什么要隔离?3、怎么进行隔离?A) 机房隔离B) 实例隔离C) 分组隔离D) 连接池隔离 与 线程池隔离E) 信号量隔离F) 第三方依赖隔离二、面试环节1、面试准备2、基本思路3、亮点方案A) 慢任务隔离B) 制作库与线上库分离三、章节总结 …

@ConditionalOnBean、@ConditionalOnMissingBean、@ConditionalOnClass

一、ConditionalOnBean ConditionalOnBean 是 Spring Boot 中的一个条件注解&#xff0c;用于在 Spring 容器中存在指定类型的 Bean 时才会生效。 具体解释如下&#xff1a; 当使用 ConditionalOnBean 注解在某个配置类或 Bean 的声明上时&#xff0c;Spring Boot 会检查 Sp…

以智慧监测模式守护燃气安全 ,汉威科技“传感芯”凸显智慧力

城市燃气工程作为城市基建的重要组成部分&#xff0c;与城市居民生活、工业生产紧密相关。提升城市燃气服务质量和安全水平&#xff0c;也一直是政府和民众关注的大事。然而&#xff0c;近年来居民住宅、餐饮等工商业场所燃气事故频发&#xff0c;时刻敲响的警钟也折射出我国在…

MySQL高级篇第4章(逻辑架构)

文章目录 1、逻辑架构剖析1.1 服务器处理客户端请求1.2 Connectors1.3 第一层&#xff1a;连接层1.4 第二层&#xff1a;服务层1.5 第三层&#xff1a;引擎层1.6 存储层1.7 小结 2、SQL执行流程2.1 MySQL 中的 SQL执行流程2.2 MySQL8中SQL执行原理2.3 MySQL5.7中SQL执行原理2.4…

9条建议告诉你如何正确处理PCB设计布线

一、关于PCB布线线宽 1、布线首先应满足工厂加工能力&#xff0c;首先向客户确认生产厂家&#xff0c;确认其生产能力&#xff0c;如图1所示。如客户无要求&#xff0c;线宽参考阻抗设计模板。 图1 PCB板厂线宽要求 2、阻抗模板&#xff0c;根据客户提供的板厚及层数要求&…

LeetCode208.Implement-Trie-Prefix-Tree<实现 Trie (前缀树)>

题目&#xff1a; 思路&#xff1a; tire树&#xff0c;学过&#xff0c;模板题。一种数据结构与算法的结合吧。 代码是&#xff1a; //codeclass Trie { private:bool isEnd;Trie* next[26]; public:Trie() {isEnd false;memset(next, 0, sizeof(next));}void insert(strin…

【环境配置】使用Docker搭建LAMP环境

这篇文章不是介绍DOCKER是什么&#xff0c;也不是阐述DOCKER的核心&#xff1a;镜像/容器和仓库之间的关系,它只是一篇让刚刚接触DOCKER的初学者&#xff0c;在没有完全了解DOCKER是什么之前,也能尽快的在Linux系统下面通过DOCKER来搭建一个LAMP环境&#xff0c;这是其一&#…

工作中遇到的关于配置问题

工作中遇到的问题 想记录一下 一个程序员小白每天遇到的问题 1.创建了一个Maven的web工程&#xff0c;但是启动一直是404&#xff0c;原服务器未能找到目标资源 解决办法&#xff1a; 选择deployment&#xff0c;点击加号选择war格式就OK啦 目录里面无法创建类&#xff0…

WPF实战学习笔记26-首页导航

修改UI&#xff0c;添加单击行为&#xff0c;并绑定导航命令 修改文件&#xff1a;Mytodo.Views.IndexView.xaml ,在导航梯形添加内容 <DataTemplate><BorderMargin"10"Background"{Binding Color}"CornerRadius"5"Opacity"0.9&…

Rust- 闭包

A closure in Rust is an anonymous function you can save in a variable or pass as an argument to another function. You can create the closure using a lightweight syntax and access variables from the scope in which it’s defined. Here’s an example of a clo…

深蓝学院C++基础与深度解析笔记 第13章 模板

1. 函数模板 ● 使用 template 关键字引入模板&#xff1a; template<typename T> //声明&#xff1a;T模板形参void fun(T); // T 函数形参template<typename T> //定义void fun(T) {...}– 函数模板不是函数 –…

什么是Java中的集成测试?

Java中的集成测试&#xff08;Integration Test&#xff09;是一种测试方法&#xff0c;用于测试多个模块或组件之间的交互和集成。在Java中&#xff0c;集成测试通常使用单元测试框架&#xff08;如JUnit&#xff09;编写和运行。 对于初学者来说&#xff0c;集成测试可能有些…

【C/C++】类之间的纵向关系——继承的概念

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

六、初始化和清理(2)

本章概要 垃圾回收器 finalize() 的用途你必须实施清理终结条件垃圾回收器如何工作 垃圾回收器 程序员都了解初始化的重要性&#xff0c;但通常会忽略清理的重要性。毕竟&#xff0c;谁会去清理一个 int 呢&#xff1f;但是使用完一个对象就不管它并非总是安全的。Java 中有…

分享一篇详尽的关于如何在 JavaScript 中实现刷新令牌的指南

介绍 刷新令牌允许用户无需重新进行身份验证即可获取新的访问令牌&#xff0c;从而确保更加无缝的身份验证体验。这是通过使用长期刷新令牌来获取新的访问令牌来完成的&#xff0c;即使原始访问令牌已过期也是如此。 通常&#xff0c;当用户登录时&#xff0c;服务器会生成一对…

CentOS 8 上安装 Nginx

Nginx是一款高性能的开源Web服务器和反向代理服务器&#xff0c;以其轻量级和高效能而广受欢迎。在本教程中&#xff0c;我们将学习在 CentOS 8 操作系统上安装和配置 Nginx。 步骤 1&#xff1a;更新系统 在安装任何软件之前&#xff0c;让我们先更新系统的软件包列表和已安…

关于提示词 Prompt

Prompt原则 原则1 提供清晰明确的指示 注意在提示词中添加正确的分割符号 prompt """ 请给出下面文本的摘要&#xff1a; <你的文本> """可以指定输出格式&#xff0c;如&#xff1a;Json、HTML提示词中可以提供少量实例&#xff0c;…

大数据面试题:Kafka的单播和多播

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 参考答案&#xff1a; 1、单播 一条消息只能被某一个消费者消费的模式称为单播。要实现消息单播&#xff0c;只要让这些消费者属于同一个消费者组即…

nosql之redis集群

文章目录 一.redis集群1.单节点redis服务器带来的问题2.集群redis3.集群的优势4.redis集群的实现方法5.redis群集的三种模式5.1 主从复制5.2 哨兵5.3 集群 二.Redis 主从复制1.主从复制概念2.主从复制的作用3.主从复制流程4.搭建Redis 主从复制4.1 安装 Redis4.2 修改 Redis 配…