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…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
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…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
