React整理总结(七、Hooks)
1.Class组件的优缺点
优点
- class组件可以定义自己的state,用来保存组件自己内部的状态;函数式组件不可以,因为函数每次调用都会产生新的临时变量;
- class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑;
比如在componentDidMount中发送网络请求,并且该生命周期函数只会执行一次; 函数式组件在学习hooks之前,如果在函数中发送网络请求,意味着每次重新渲染都会重新发送一次网络请求; - class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等; 函数式组件在重新渲染时,整个函数都会被执行,似乎没有什么地方可以只让它们调用一次;
缺点
- 复杂组件变得难以理解
- 难以理解的class
- 组件复用状态很难:
- 高阶组件;
- redux中connect或者react-router中的withRouter
- 于Provider、Consumer来共享一些状态
hooks
- 简单总结一下hooks:
- 它可以让我们在不编写class的情况下使用state以及其他的React特性;
- 但是我们可以由此延伸出非常多的用法,来让我们前面所提到的问题得到解决;
- Hook的使用场景:
- Hook的出现基本可以代替我们之前所有使用class组件的地方;
- Hook只能在函数组件中使用,不能在类组件,或者函数组件之外的地方使用;
2. 常用hooks
const [msg, setMsg] = useState("hello hooks");
useEffect(() => {// 执行return () => {// 取消}
}, [//依赖项])
// context.js
import { createContext } from 'react';const UserContext = createContext();
const ThemeContext = createContext();export default {
UserContext, ThemeContext
}// App.jsx
<UserContext.Provider value={{name: 'xiaoming', age: 18}}><ThemeContext.Provider value={{color: 'red', size: 12}}><App></ThemeContext.Provider>
</UserContext.Provider>// Function Comp
export default () => {const USER = useContext(UserContext);const THEME = useContext(ThemeContext);return (<><h2>{USER.name}-{USER.age}</h2><h3 style={{color: THEME.color, size: THEME.size}}>content</h3></>)
}
// const [state, dispatch] = userReducer(reducer, initState);import React, { memo, userReducer } from 'react';function reducer(state, action){switch(action.type){case 'add':return {...state, counter: state.counter + action.payload};case 'sub':return {...state, counter: state.counter - action.payload};default:return state;}
}export default memo(() => {const [state, dipatch] = useReducer(reducer, {counter: 0});return <><h2>counter: {state.counter}</h2><button onClick={() => dispatch({type: 'add', payload: 5})}>+5</button><button onClick={() => dispatch({type: 'sub', payload: 5})}>-5</button></>
})
useCallback会返回一个函数的 memoized(记忆的) 值;在依赖不变的情况下,多次定义的时候,返回的值是相同的;
作为参数传递给子组件时使用;
const fn = useCallback(() => {dosomething(a, b);
}, [a, b]);
配合useRef使用;
const [count, setCount] = useState();
const countRef = useRef();
countRef.current = count;
const addFn = useCallback(() => setCount(countRef.current + 1), []);
useMemo(() ={}, [dep])对回调函数的结果进行缓存
useCallback(fn,[dep]) = useMemo(() => fn, [dep])
- 进行大量的计算操作,是否有必须要每次渲染时都重新计算;
- 对子组件传递相同内容的对象时,使用useMemo进行性能的优化
-
2.6
useRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变。- 用于获取dom元素
- 用于保存具体的值,解决闭包陷阱
-
2.7
useImperativeHandle子组件向父组件传递特定的对象
const SonComponent = memo(forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(() => {return {focus(){inputRef.current.focus();}setValue(val){inputRef.current.value = val;}} //返回的这个对象会被绑定到ref.current})return (<><h2>son component<h2><input ref={inputRef}/></>)
}))const FatherComponent = memo(() => {const sonRef = useRef();return (<><h1>father comp</h1><SonComponent ref={sonRef} /></>)
})
-
2.8
useLayoutEffect()- useEffect会在渲染的内容更新到DOM上后执行,不会阻塞DOM的更新;
- useLayoutEffect会在渲染的内容更新到DOM上之前执行,会阻塞DOM的更新;
3. 自定义hook
- 形如
useFn,内部可以使用其他hook
// 获取滚动位置
export function useWindomPosition(){const [position, setPosition] = useState();const handleScroll = () => {setPosition(window.scrollY);}useEffect(() => {document.addEventListener('scroll', handleScroll);return () => {document.removeEventListener('scroll', handleScroll);}})return position;
}// 使用localStorage存储数据
export function useLocalStorage(key){const [data, setData] = useState(() => JSON.parse(window.localStorage.getItem(key)));useEffect(() => {window.localStorage.setItem(key, data);}, [data]);return [data, setData];
}
4.其他hook
useSelector将state映射到组件中;useDispatch直接获取dispatch函数;useStore获取store对象;- 参数一:将state映射到需要的数据中;
- 参数二:可以进行比较来决定是否组件重新渲染。如果state中的a发生变化,某个组件只用了state中的b,也会重新渲染,所以需要第二个参数优化。
// 1.获取state
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
const { count } = useSelector((state) => {return {count: state.counter.count}
},shallowEqual)
useId用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。- useId是用于react的同构应用开发的,前端的SPA页面并不需要使用它;
- useId可以保证应用程序在客户端和服务器端生成唯一的ID,这样可以有效的避免通过一些手段生成的id不一致,造成
hydration mismatch;
useTransition返回一个状态值表示过渡任务的等待状态,以及一个启动该过渡任务的函数。告诉react对于某部分任务的更新优先级较低,可以稍后进行更新。useDeferredValue接受一个值,并返回该值的新副本,该副本将推迟到更紧急地更新之后。
相关文章:
React整理总结(七、Hooks)
1.Class组件的优缺点 优点 class组件可以定义自己的state,用来保存组件自己内部的状态;函数式组件不可以,因为函数每次调用都会产生新的临时变量;class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻…...
软件测试之银行测试详解
一、金融类软件测试 举个栗子,银行里的软件测试工程师。横向跟互联网公司里的测试来说,薪资相对稳定,加班的话想对来说没那么多(有些银行加班也挺严重的),但业务稳定。实在是测试类岗位中的香饽饽…...
C#中的警告CS0120、CS0176、CS0183、CS0618、CS8600、CS8602、CS8604、CS8625及处理
目录 一、CS0120 二、CS0176 1.解决前 2.解决后 3.解决办法 三、CS0183 四、CS0618 五、CS8600 六、CS8602 七、CS8622 1. 解决前: 2. 解决后: 3.解决方法: 八、CS8604和CS8625 一、CS0120 严重性 代码 说明 项目 文件 行…...
CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式
一、web 设置placeholder 设置浏览器的placeholder样式 ::-webkit-input-placeholder { /* WebKit browsers */color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19 */color: #999; } :-ms-input-p…...
升级python后sudo apt-get update报错
sudo apt-get update 报错: sh: /usr/lib/cnf-update-db: /usr/bin/python3.7.5: bad interpreter: No such file or directory Reading package lists... Done E: Problem executing scripts APT::Update::Post-Invoke-Success if /usr/bin/test -w /var/lib/c…...
应用可观测性OpenTelemetry简介
应用可观测性OpenTelemetry简介 OpenTelmetry遥测方案可观测性三支柱日志 Logs指标跟踪 什么是OpenTelemetryOpenTelemetry架构和组件OpenTelemetry与OpenCensus、OpenTracing是什么关系 OpenTelmetry遥测方案 可观测性三支柱 日志 Logs 日志是特定事件在特定时间点发生的文本…...
install pnpm : 无法加载文件的解决办法
问题描述 我在使用pnpm的时候报错 PS D:\emss\pure-admin-backend> pnpm install pnpm : 无法加载文件 C:\Users\RD-16\AppData\Roaming\npm\pnpm.ps1。未对文件 C:\Users\RD-16\AppData\Roaming\npm\pnpm.ps1 进行数字签名。无法在当前系统上运 行该脚本。有关运行脚本和设…...
【Python百宝箱】Python数据探险:Excel与数据科学的完美结合
前言 在当今信息爆炸的时代,数据处理和分析已经成为各行各业不可或缺的一部分。在众多数据处理工具中,Python以其简洁而强大的语法成为数据科学家和分析师的首选之一。本文将深入探讨与电子表格处理相关的Python库,介绍它们的功能、应用场景…...
外贸分享|如何从外贸小白成长为大咖?这10件事值得你坚持做
外贸成功不是一朝一夕的事,而是需要有充分的准备和持续的努力。作为一位有着丰富经验的外贸人员,我总结了成功的秘诀,分享了一个优秀的外贸人应该做好的10项工作。 1 找不到客户怎么办? 有很多各种各样的原因值得思考:…...
深度学习之六(自编码器--Autoencoder)
概念 自编码器(Autoencoder)是一种神经网络架构,用于无监督学习和数据的降维表示。它由两部分组成:编码器(Encoder)和解码器(Decoder)。 结构: 编码器(Encoder): 接收输入数据并将其压缩为潜在表示(latent representation),通常比输入数据的维度要低。编码器的…...
Docker Swarm总结+基础、集群搭建维护、安全以及集群容灾(1/3)
博主介绍:Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 🍅文末获取源码下载地址🍅 👇🏻 精彩专栏推荐订阅👇🏻…...
Vim 一下日志文件,Java 进程没了?
一次端口告警,发现 java 进程被异常杀掉,而根因竟然是因为在问题机器上 vim 查看了 nginx 日志。下面我将从时间维度详细回顾这次排查,希望读者在遇到相似问题时有些许启发。 时间线 15:19 收到端口异常 odin 告警。 状态:P1故障 名称:应用端…...
C# Dictionary的使用
在 C# 中,Dictionary 是一种常用的数据结构,用于存储键值对。以下是一些常见的 Dictionary 操作: 创建和初始化一个 Dictionary 可以使用以下代码创建并初始化一个 Dictionary: Dictionary<string, int> dict new Dicti…...
解决DaemonSet没法调度到master节点的问题
最近在kubernetes部署一个springcloud微服务项目,到了最后一步部署边缘路由:使用nginx-ingress和traefik都可以,必须使用DaemonSet部署,但是发现三个节点,却总共只有两个pod。 换句话说, DaemonSet没法调度…...
2023.11.20 关于 Spring MVC 详解
目录 MVC 工作流程 Spring MVC 掌握三个功能 创建 Spring MVC 项目 推荐安装插件 EditStarters 基础注解 RequestMapping 指定 GET 和 POST 方法类型 ResponseBody 获取参数 传递 单个 或 多个参数 参数重命名 RequestParam 接收 JSON 对象 RequestBody 获取 …...
救命~终于找到一款好看又舒适的家居服了
暖乎乎的软糯家居服 简直不要太好看太舒服了 双层舒棉绒舒适又暖和 防风收口设计,时尚与实用性兼具 经典版型不挑人穿 居家外出都可哦!!...
C#每天复习一个重要小知识day5:枚举与switch是天生一对
因为枚举一般用来表示条件和类型等等,所以它一般用条件分支来表现。所以枚举与switch是天生一对,因为很方便。(用if语句也可,但是没switch方便) 简单的举例: namespace 精细练习 {enum E_Player {Main,Ot…...
idea修改行号颜色
前言 i当idea用了深色主题后,发现行号根本看不清,或者很模糊 例如下面这样 修改行号颜色 在IntelliJ IDEA中,你可以根据自己的喜好和需求定制行号的颜色。下面是修改行号颜色的步骤: 打开 IntelliJ IDEA。 转到 “File”&…...
U-boot(四):start_armboot
本文主要探讨210的uboot启动的第二阶段,主要函数为start_armboot。 uboot 一阶段初始化SoC内部部件(看门狗、时钟等),初始化DDR,重定位 二阶段初始化其余硬件(iNand、网卡芯片)以及命令、环境变量等 启动打印硬件信息,进入bootdelay,读秒完后执行bootc…...
.Net面试题4
1.请解释一下泛型(Generics)在C#中的作用。 泛型是一种将数据类型参数化的机制,使得代码可以在编译时具有更强的类型安全性和灵活性。C#中的泛型可以用于类、接口、方法等的定义和实例化。泛型允许在编写代码时使用具有不同实参的类型&#x…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存:一级缓存、二级缓存 默认情况下,只有一级缓存开启(sqlSession级别的缓存)二级缓存需要手动开启配置,需要局域namespace级别的缓存 一级缓存(本地缓存&#…...
