React Hooks学习笔记
一、usestate的使用方法-初始化state函数
import React, { useState } from "react";
function App() {const [count, setCount] = useState(0);return (<div><p>点击{count}次</p><button onClick={() => setCount(count + 1)}>点击</button></div>)
运行效果图:

二、useEffect的使用方法-执行钩子函数的操作
import React, { useState, useEffect } from "react";
const [count,setCount] = useState(0);const btnClick = () =>{setCount(count + 1);}useEffect(() =>{console.log("执行了useEffect");document.title = '点击了{count}次'})return(<div><p>点击{count}次</p><button onClick = {() => { btnClick()}}>点击</button></div>)
运行效果图:


三、useContext的使用方法-实现组件之间的共享
import React, { useContext, createContext } from "react";
const myContext = createContext();function App(){const value = useContext(myContext);return(<div>{value}</div>);}export default function MyComponent(){return(<myContext.Provider value={100}><div>hello world</div><App/></myContext.Provider>);}
运行效果图:

四、useReducer的使用方法-把组件的所有状态更新逻辑整合到reducer这个函数中
import React, { useReducer } from "react";
function Counter(){const initState = {count: 0 };function reducer(state, action){switch(action.type){case 'increment':return { count: state.count + 1};case 'decrement':return {count: state.count - 1};default:return{ count: state};}}const [state,dispatch] = useReducer(reducer, initState);return(<div><button onClick={() => dispatch({ type:'decrement'})}>减</button><span>{state.count}</span><button onClick={() => dispatch({ type:'increment'})}>加</button></div>)}export default Counter;
运行效果图:
![]()
![]()
![]()
五、useMemo的使用方法-对数据的记忆,具有缓存功能,类似于Vue的计算属性
useMemo 接收2个参数,第1个参数为执行运算的函数,第2个参数为要监控的状态。
import React, { useMemo } from "react";
function Counter(){const [count, setCount] = useState(0);const value = useMemo(function(){return count * 2;},[count]);//数组中的元素就是useMemo监控的状态return (<div><h3>{count}</h3><h3>{value}</h3><button onClick={() => setCount(count + 1)}>按钮</button></div>)}export default Counter;
运行效果图:


六、useRef的使用方法-获取组件中的 dom 对象
import React, { useRef } from "react";
function App(){const refObj = useRef();console.log(refObj);function getRef(){console.log(refObj); }return(<div><div ref={refObj}>hello</div><button onClick={getRef}>按钮</button></div>);}
export default App;
运行效果图:


七、useCallback的使用方法-允许多次渲染中缓存数据,返回一个memoized回调函数,对函数的记忆
有2个函数,第一个参数是要缓存的函数,第二个参数是一个数组 (响应值变化时更新函数)
import React, { useCallback, memo } from "react";function App(){const[count, setCount] = useState(1);const fn = useCallback(function (){return count;},[count]);return(<div>{count}<button onClick={() => setCount(count + 1)}>增加</button><Heads fn={fn}></Heads></div>);}const Heads = memo(function(props){return <button onClick={() =>console.log(`我被渲染了${props.fn()}次`)}>按钮</button>});
export default App;
运行效果图:
![]()

八、useImperativeHandle和forwardRef的使用方法
- useImperativeHandle-自定义由 ref 暴露出来的程序、数据或地址表等的入口地址,可应用于父组件访问子组件的场景。
- forwardRef-允许组件使用 ref 将一个 DOM 节点暴露给父组件
import React, {useRef,useImperativeHandle, forwardRef } from "react";
function App(){const CounterRef = useRef();function click(){const { count, setCount } = CounterRef.current || {};setCount(count + 1);}return(<><Counter ref={CounterRef}></Counter><button onClick={click}>按钮</button></>);}const Counter = forwardRef((props,ref) =>{const [count, setCount] = useState(0);useImperativeHandle(ref,() => ({ count, setCount }), [count]);return<>{count}</>});export default App;
运行效果图:
![]()
相关文章:
React Hooks学习笔记
一、usestate的使用方法-初始化state函数 import React, { useState } from "react"; function App() {const [count, setCount] useState(0);return (<div><p>点击{count}次</p><button onClick{() > setCount(count 1)}>点击</bu…...
BGP第二日
上图为今日所用拓扑 ,其中R1和R4,R3和R5为EBGP邻居,R1和R3为IBGP邻居,AS200区域做OSPF动态路由 一.BGP建立邻居的六种状态 1.idle 空闲状态:建立邻居最初的状态 2.Connect 连接状态:在…...
rabbitmq集群创建admin用户之后,提示can access virtual hosts是No access状态
问题描述: 因业务需要使用的rabbitmq是3.7.8版本的,rabbitmq在3.3.0之后就允许使用guest账号的权限了,所以需要创建一个administrator标签的用户。 如下操作创建的用户: 创建完成之后就提示如下的报错: 注:…...
ARM功耗管理之多核处理器启动
安全之安全(security)博客目录导读 思考:SecureBoot?多核处理器启动流程?PSCI启动方式? 一般嵌入式系统使用的都是对称多处理器(Symmetric Multi-Processor, SMP)系统,包含了多个cpu, 这几个cp…...
java使用easypoi模版导出word详细步骤
文章目录 第一步、引入pom依赖第二步、新建导出工具类WordUtil第三步、创建模版word4.编写接口代码5.导出结果示例 第一步、引入pom依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><…...
Android 内部保持数据的方式
Android内部保持数据的方式主要有五种,每种方式都有其特定的用途和优点。以下是详细的介绍: SQLite数据库 定义:SQLite是一个轻量级的、跨平台的数据库,所有的信息都存储在单一文件内,占用内存小,并且支持…...
uniapp 表格,动态表头表格封装渲染
1.接口表格数据: {"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name&quo…...
beyond Compare连接 openWrt 和 VsCode
连接步骤总结 1. 新建会话 -> 文件夹比较 2.点击浏览文件夹 3.在弹出页面 配置 ftp 3.1)选中ftp 配置文件 3.2)选中ssh2 3.3)填写我们需要远端连接的主机信息 先点击连接并浏览 得到下方文件夹 弹出无效登录,说明需要密码 我们返回右键刚刚创建的新 …...
量化机器人能否识别市场机会?
量化机器人的设计和应用是为了通过高级算法和大数据分析,精确地识别和把握市场中的交易机会。这些机器人的能力不仅仅局限于执行预定的交易策略,更包括在复杂和快速变化的市场环境中识别利润机会。 首先,量化机器人能够处理和分析大量的市场…...
香橙派AIpro开发板评测:部署yolov5模型实现图像和视频中物体的识别
OrangePi AIpro 作为业界首款基于昇腾深度研发的AI开发板,自发布以来就引起了我的极大关注。其配备的8/20TOPS澎湃算力,堪称目前开发板市场中的顶尖性能,实在令人垂涎三尺。如此强大的板子,当然要亲自体验一番。今天非常荣幸地拿到…...
MongoDB教程(二):mongoDB引用shell
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MongoD…...
A133 Android10 root修改
1.前言 客户应用需求root相关的权限,我们需要修改系统的权限才可以满足客户需求 2.修改方法 frameworks层:注释掉 diff --git a/frameworks/base/core/jni/com_android_internal_os_Zygote.cpp b/frameworks/base/core/jni/com_android_internal_os_…...
实验场:在几分钟内使用 Bedrock Anthropic Models 和 Elasticsearch 进行 RAG 实验
作者:来自 Elastic Joe McElroy, Aditya Tripathi 我们最近发布了 Elasticsearch Playground,这是一个新的低代码界面,开发人员可以通过 A/B 测试 LLM、调整提示(prompt)和分块数据来迭代和构建生产 RAG 应用程序。今天…...
代理详解之静态代理、动态代理、SpringAOP实现
1、代理介绍 代理是指一个对象A通过持有另一个对象B,可以具有B同样的行为的模式。为了对外开放协议,B往往实现了一个接口,A也会去实现接口。但是B是“真正”实现类,A则比较“虚”,他借用了B的方法去实现接口的方法。A…...
Laravel - laravel-websockets 开发详解
1.我laravel-websockets 的开发环境 Laravel 9.0Laravel WebSockets (最新版)Laravel Vite 2. 安装服务器端包 beyondcode/laravel-websockets 运行以下命令安装laravel-websockets composer require beyondcode/laravel-websockets 安装完后&#…...
vue3 学习笔记04 -- axios的使用及封装
vue3 学习笔记04 – axios的使用及封装 安装 Axios 和 TypeScript 类型定义 npm install axios npm install -D types/axios创建一个 Axios 实例并封装成一个可复用的模块,这样可以在整个应用中轻松地进行 API 请求管理。 在 src 目录下创建一个 services 文件夹&…...
键盘快捷键设置录入
效果图: 代码: import React, {useContext, useEffect, useRef} from react import {message} from "antd"; import lodash from "lodash"; import {StateContext} from ../../index.tsx import {useUpdateEffect} from "ahoo…...
刷题Day49|647. 回文子串、516.最长回文子序列
647. 回文子串 647. 回文子串 - 力扣(LeetCode) 思路:递推公式的含义是[i, j]内的子串是否为回文子串(bolean[][])。一共两种情况:s[i] s[j],i和j相差1以外就得判断中间包含的的字符串是否为回文了&…...
关于transformers库验证时不进入compute_metrics方法的一些坑
生成式任务输入就是标签 transformers在进入compute_metrics前会有一个判断,源码如下: # 版本 transformers4.41.2 # 在trainer.py 的 3842 行 # Metrics! if (self.compute_metrics is not Noneand all_preds is not Noneand all_labels is not Nonea…...
苹果提出RLAIF:轻量级语言模型编写代码
获取本文论文原文PDF,请在公众号【AI论文解读】留言:论文解读 代码生成一直是一个充满挑战的领域。随着大型语言模型(LLM)的出现,我们见证了在自然语言理解和生成方面的显著进步。然而,当涉及到代码生成&a…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
面试高频问题
文章目录 🚀 消息队列核心技术揭秘:从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"?性能背后的秘密1.1 顺序写入与零拷贝:性能的双引擎1.2 分区并行:数据的"八车道高速公路"1.3 页缓存与批量处理…...
在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤: 第一步: 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为: // 改为 v…...
raid存储技术
1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划,涵盖存储系统的布局、数据存储策略等,它明确数据如何存储、管理与访问,为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...
