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

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的使用方法

  1. useImperativeHandle-自定义由 ref 暴露出来的程序、数据或地址表等的入口地址,可应用于父组件访问子组件的场景。
  2. 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第二日

上图为今日所用拓扑 &#xff0c;其中R1和R4&#xff0c;R3和R5为EBGP邻居&#xff0c;R1和R3为IBGP邻居&#xff0c;AS200区域做OSPF动态路由 一.BGP建立邻居的六种状态 1.idle 空闲状态&#xff1a;建立邻居最初的状态 2.Connect 连接状态&#xff1a;在…...

rabbitmq集群创建admin用户之后,提示can access virtual hosts是No access状态

问题描述&#xff1a; 因业务需要使用的rabbitmq是3.7.8版本的&#xff0c;rabbitmq在3.3.0之后就允许使用guest账号的权限了&#xff0c;所以需要创建一个administrator标签的用户。 如下操作创建的用户&#xff1a; 创建完成之后就提示如下的报错&#xff1a; 注&#xff1a…...

ARM功耗管理之多核处理器启动

安全之安全(security)博客目录导读 思考&#xff1a;SecureBoot&#xff1f;多核处理器启动流程&#xff1f;PSCI启动方式&#xff1f; 一般嵌入式系统使用的都是对称多处理器&#xff08;Symmetric Multi-Processor, SMP&#xff09;系统&#xff0c;包含了多个cpu, 这几个cp…...

java使用easypoi模版导出word详细步骤

文章目录 第一步、引入pom依赖第二步、新建导出工具类WordUtil第三步、创建模版word4.编写接口代码5.导出结果示例 第一步、引入pom依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><…...

Android 内部保持数据的方式

Android内部保持数据的方式主要有五种&#xff0c;每种方式都有其特定的用途和优点。以下是详细的介绍&#xff1a; SQLite数据库 定义&#xff1a;SQLite是一个轻量级的、跨平台的数据库&#xff0c;所有的信息都存储在单一文件内&#xff0c;占用内存小&#xff0c;并且支持…...

uniapp 表格,动态表头表格封装渲染

1.接口表格数据&#xff1a; {"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name&quo…...

beyond Compare连接 openWrt 和 VsCode

连接步骤总结 1. 新建会话 -> 文件夹比较 2.点击浏览文件夹 3.在弹出页面 配置 ftp 3.1&#xff09;选中ftp 配置文件 3.2)选中ssh2 3.3)填写我们需要远端连接的主机信息 先点击连接并浏览 得到下方文件夹 弹出无效登录&#xff0c;说明需要密码 我们返回右键刚刚创建的新 …...

量化机器人能否识别市场机会?

量化机器人的设计和应用是为了通过高级算法和大数据分析&#xff0c;精确地识别和把握市场中的交易机会。这些机器人的能力不仅仅局限于执行预定的交易策略&#xff0c;更包括在复杂和快速变化的市场环境中识别利润机会。 首先&#xff0c;量化机器人能够处理和分析大量的市场…...

香橙派AIpro开发板评测:部署yolov5模型实现图像和视频中物体的识别

OrangePi AIpro 作为业界首款基于昇腾深度研发的AI开发板&#xff0c;自发布以来就引起了我的极大关注。其配备的8/20TOPS澎湃算力&#xff0c;堪称目前开发板市场中的顶尖性能&#xff0c;实在令人垂涎三尺。如此强大的板子&#xff0c;当然要亲自体验一番。今天非常荣幸地拿到…...

MongoDB教程(二):mongoDB引用shell

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…...

A133 Android10 root修改

1.前言 客户应用需求root相关的权限&#xff0c;我们需要修改系统的权限才可以满足客户需求 2.修改方法 frameworks层&#xff1a;注释掉 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 实验

作者&#xff1a;来自 Elastic Joe McElroy, Aditya Tripathi 我们最近发布了 Elasticsearch Playground&#xff0c;这是一个新的低代码界面&#xff0c;开发人员可以通过 A/B 测试 LLM、调整提示&#xff08;prompt&#xff09;和分块数据来迭代和构建生产 RAG 应用程序。今天…...

代理详解之静态代理、动态代理、SpringAOP实现

1、代理介绍 代理是指一个对象A通过持有另一个对象B&#xff0c;可以具有B同样的行为的模式。为了对外开放协议&#xff0c;B往往实现了一个接口&#xff0c;A也会去实现接口。但是B是“真正”实现类&#xff0c;A则比较“虚”&#xff0c;他借用了B的方法去实现接口的方法。A…...

Laravel - laravel-websockets 开发详解

1.我laravel-websockets 的开发环境 Laravel 9.0Laravel WebSockets &#xff08;最新版&#xff09;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 实例并封装成一个可复用的模块&#xff0c;这样可以在整个应用中轻松地进行 API 请求管理。 在 src 目录下创建一个 services 文件夹&…...

键盘快捷键设置录入

效果图&#xff1a; 代码&#xff1a; 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. 回文子串 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;递推公式的含义是[i, j]内的子串是否为回文子串&#xff08;bolean[][])。一共两种情况&#xff1a;s[i] s[j]&#xff0c;i和j相差1以外就得判断中间包含的的字符串是否为回文了&…...

关于transformers库验证时不进入compute_metrics方法的一些坑

生成式任务输入就是标签 transformers在进入compute_metrics前会有一个判断&#xff0c;源码如下&#xff1a; # 版本 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&#xff0c;请在公众号【AI论文解读】留言&#xff1a;论文解读 代码生成一直是一个充满挑战的领域。随着大型语言模型&#xff08;LLM&#xff09;的出现&#xff0c;我们见证了在自然语言理解和生成方面的显著进步。然而&#xff0c;当涉及到代码生成&a…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...