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

react hooks

1 useEffect(setup,dependencies)

使用object.is来比较每个依赖项和它先前的值

依赖项为空数组的effect不会在组件任何props和state发生改变时重新运行

当useEffect依赖于外部传入props对象时,容易造成死循环
需要对依赖对象进行深比较

import { isEqual } from 'lodash'
const useCompare = (value: any, compare: any) => {const ref = useRef(null)if(!compare(value,ref.current)){ref.current = value}return ref.current
}const params = useCompare({...accessParam,...reqParam,
},isEqual)useEffect(()=>{
},[params])

2 useRef

应用一个不需要渲染的值,改变ref不会触发重新渲染

const ref = useRef(value)

不要在渲染期间写入或读取ref.current

通过ref操作DOM:

const ref = useRef(null)
<input ref={ref} />

获取子元素的ref

const children = forwardRef((props,ref)=>{return (<Input ref={ref}/>)
})

3 useContext

跨层级传递变量

const ThemeContext = createContext(null)<ThemeContext.Provider value='dark'><Form>
<ThemeContext.Provider/>//使用context
const context = useContext(ThemeContext)

通过context更新对象

	<Provider value={{user,setUser}}></Provider>

4 useImperativeHandle(ref,createHandle,dependencies)

用于定义ref暴露出的句柄

5 useReducer(reducer, initialArg,init?)

允许向组件里面添加一个reducer用于状态管理

  • reducer(state,action) => newState 用于更新state的纯函数
  • initialArg:初始化state的值
  • init:用于计算初始值的函数

返回值为数组:[currentState, dispatch]

注意:dispatch函数为下一次渲染更新state,因此调用后拿不到更新后的值。如果提供state与当前state一致react会跳过组件和子组件的重新渲染

用法:

//state是只读的,不可尝试修改
const reducer = (state,action) => {if(action.type === '') {return {...state}}
}const [state, dispatch] = useReducer(reducer, { age: 42 })//调用更新函数
dispatch({type: ''})

6 memo

允许组件在props没有改变的情况下跳过重新渲染

如果传递给组件的props是一个对象,应使用useMemo避免父组件每次重新创建该对象
如果传递给组件的props是一个函数,应使用useCallback进行缓存

7 createPortal(children,domNode,key?)

允许将JSX作为children渲染至DOM不同部分

应用场景:当样式有overflow:hidden或z-index,需要子组件能视觉上跳出当前容器

import {createPortal} from 'react-dom'<div>{createPortal(<p />, document.body)	}
</div>

相关文章:

react hooks

1 useEffect(setup,dependencies) 使用object.is来比较每个依赖项和它先前的值 依赖项为空数组的effect不会在组件任何props和state发生改变时重新运行 当useEffect依赖于外部传入props对象时&#xff0c;容易造成死循环 需要对依赖对象进行深比较 import { isEqual } from…...

一起学数据结构(1)——复杂度

目录 1. 时间复杂度&#xff1a; 1.1 时间复杂度的概念&#xff1a; 1.2 时间复杂度的表示及计算&#xff1a; 1.3 较为复杂的时间复杂度的计算&#xff1a; 2. 空间复杂度&#xff1a; 2.1 空间复杂度的概念&#xff1a; 2.2 空间复杂度的计算&#xff1a; 1. 时间复杂度…...

<el-date-picker>组件选择开始时间,结束时间自动延长30min

背景&#xff1a;选择开始时间&#xff0c;结束时间自动增加30分钟&#xff0c;结束时间也可重新选择&#xff0c;如图&#xff1a; <el-form-item label"预约开始时间" prop"value1"><el-date-pickersize"large"v-model"ruleForm…...

eslint-webpack-plugin

说明&#xff1a;现在eslint已经弃用了eslint-loader,如果要安装来使用的话&#xff0c;会报错&#xff0c;烦死人 大概的报错信息如下&#xff1a; ERROR in ./src/index.js Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read …...

logback中文一直是乱码,logback中文问号

logback一直是乱码 方案一加上UTF-8 方案二我这边方案一不行 在启动参数加上 -Dfile.encodingutf-8 这个竟然就可以了...

C++之文件操作

1.C文件操作 C中文件操作头文件:fstream。   文件类型&#xff1a;文件文件和二进制文件。 文件操作三大类&#xff1a;     ofstream 写操作     ifstream 读操作     fstream:读写操作 文件打开方式&#xff1a; 标志说明ios::in只读ios::out只写,文件不存在则…...

CentOS 7.6安装 MongoDB 5.0.2

https://developer.aliyun.com/article/983777 我遇到的问题&#xff1a;如何以集群的方式启动&#xff0c;使用replSet的方式进行启动&#xff1a; 需要在配置文件上加上replSet的信息 port27017 #端口 bind_ip0.0.0.0 #默认是127.0.0.1 dbpath/usr/local/mongodb/data #数据…...

Windows下安装python3教程

参考:https://blog.csdn.net/kailingr/article/details/128193083 一、安装步骤图解 准备工作&#xff1a; 进官网https://www.python.org/下载Python 安装包&#xff0c;注意&#xff1a;Python 3.9不能在Windows 7或更早版本上使用 安装&#xff1a; 1.下载完之后双击该文…...

opencv-27 阈值处理 cv2.threshold()

怎么理解阈值处理? 阈值处理&#xff08;Thresholding&#xff09;是一种常用的图像处理技术&#xff0c;在机器学习和计算机视觉中经常被用于二值化图像或二分类任务。它基于设定一个阈值来将像素值进行分类&#xff0c;将像素值大于或小于阈值的部分分为两个不同的类别&…...

AAOS 音频焦点请求

文章目录 前言基本概念提供给应用来获取音频焦点的apiAAOS中的音频焦点管理交互矩阵duck的实现流程AAOS 测试应用kitchensink焦点相关 前言 本文章的目标是首先了解Android中音频焦点的基本概念&#xff0c;理解代码中相关音频焦点的使用方法。其次理解AAOS 中相关交互矩阵概念…...

订单系统中的幂等实现

一.订单提交的例子 一个订单生成并支付的过程&#xff0c;大致为&#xff1a;用户点击前端页面提交订单->后端根据此次提交信息生成订单->用户确认订单并进行支付操作->支付成功。 主要分为前端层面&#xff0c;后端系统层面&#xff0c;数据库层面。前端层面不详述…...

三个常用查询:根据用户名 / token查询用户信息+链表分页条件查询

目录 1.根据用户名或者token查询用户信息 会员信息实体类 统一状态Result类 controller层 service层及实现类 dao层 测试&#xff1a; 2.链表分页条件查询 会员等级实体类 封装条件类PageVo controller层 service层及实现类 dao层 Mapper.xml层 测试 vue前端参考 1.根据用户名…...

列表、张量、向量和矩阵的关系

在数学和编程中&#xff0c;列表、张量、向量和矩阵之间有一定的关系。这些概念在不同领域和语境中有略微不同的定义和用法&#xff0c;以下是它们之间的一般关系&#xff1a; 列表&#xff08;List&#xff09;&#xff1a; 列表是编程语言中的一种数据结构&#xff0c;用于存…...

华为数通HCIP-ISIS高级

isis区域间的互访 1、L2区域 to L1区域 在L1区域发布的路由会以L1-LSP在L1区域内传递&#xff0c;到达L1-2路由器时&#xff0c;L1-2路由器会将该L1-LSP转换为L2-LSP在L2区域内传递&#xff1b; 因此L2区域的设备可以学习到L1区域的明细路由&#xff0c;进行访问&#xff1b;…...

CorelDraw怎么做立体字效果?CorelDraw制作漂亮的3d立体字教程

1、打开软件CorelDRAW 2019&#xff0c;用文本工具写上我们所需要的大标题。建议字体选用比较粗的适合做标题的字体。 2、给字填充颜色&#xff0c;此时填充的颜色就是以后立体字正面的颜色。我填充了红色&#xff0c;并加上了灰色的描边。 3、选中文本&#xff0c;单击界面左侧…...

大致了解Redis

为了保证数据的可靠性&#xff0c;Redis 需要在磁盘上读写 AOF 和 RDB&#xff0c;但在高并发场景里&#xff0c;这就会直接带来两个新问题&#xff1a;一个是写 AOF 和RDB 会造成 Redis 性能抖动&#xff0c;另一个是 Redis 集群数据同步和实例恢复时&#xff0c;读 RDB 比较慢…...

javaweb会话技术

cookie的入门使用 package com.hspedu.cookie;import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import …...

android app控制ros机器人三(android登录界面)

接下来是二次开发的具体环节了&#xff0c;由于存在用户需求&#xff0c;用到ros-mobile不多&#xff0c;更偏向于android开发。 用ppt画了简单的展示界面&#xff0c;与用后交流界面的功能布局。先开发一代简易版本的app&#xff0c;后续可以丰富完善。ctrlcv上线。 登录界面…...

Android版本的发展4-13

Android 4.4 KitKat 1、通过主机卡模拟实现新的 NFC 功能。 2、低功耗传感器&#xff0c;传感器批处理&#xff0c;步测器和计步器。 3、全屏沉浸模式&#xff0c;隐藏所有系统 UI&#xff0c;例如状态栏和导航栏。它适用于鲜艳的视觉内容&#xff0c;例如照片、视频、地图、…...

【2023.7.29】浅谈手办——新人入坑指南

目录 前言入坑指南1.声明2.介绍3.树状图 总结参考文章 前言 出于对动漫的热爱&#xff0c;相信很多人都会买手办&#xff0c;本人在大一时开始入手了第一个手办&#xff0c;超大猿王路飞&#xff08;高约50cm&#xff09;&#xff0c;当时对手办还不是很了解&#xff0c;只知道…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

Android15默认授权浮窗权限

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

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...