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

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

  • 2.1useState保存状态
const [msg, setMsg] = useState("hello hooks");
  • 2.2useEffect副作用
useEffect(() => {// 执行return () => {// 取消}
}, [//依赖项])
  • 2.3useContext(XXXContext)接获取某个Context的值
// 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></>)
}
  • 2.4userReducer()管理负责数据, useState的替代品,而非redux的替代品
// 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></>
})
  • 2.5 性能优化useCallback记忆化回调函数,useMemo

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&#xff0c;用来保存组件自己内部的状态&#xff1b;函数式组件不可以&#xff0c;因为函数每次调用都会产生新的临时变量&#xff1b;class组件有自己的生命周期&#xff0c;我们可以在对应的生命周期中完成自己的逻…...

软件测试之银行测试详解

一、金融类软件测试 举个栗子&#xff0c;银行里的软件测试工程师。横向跟互联网公司里的测试来说&#xff0c;薪资相对稳定&#xff0c;加班的话想对来说没那么多&#xff08;有些银行加班也挺严重的&#xff09;&#xff0c;但业务稳定。实在是测试类岗位中的香饽饽&#xf…...

C#中的警告CS0120、CS0176、CS0183、CS0618、CS8600、CS8602、CS8604、CS8625及处理

目录 一、CS0120 二、CS0176 1.解决前 2.解决后 3.解决办法 三、CS0183 四、CS0618 五、CS8600 六、CS8602 七、CS8622 1. 解决前&#xff1a; 2. 解决后&#xff1a; 3.解决方法&#xff1a; 八、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 报错&#xff1a; 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与数据科学的完美结合

前言 在当今信息爆炸的时代&#xff0c;数据处理和分析已经成为各行各业不可或缺的一部分。在众多数据处理工具中&#xff0c;Python以其简洁而强大的语法成为数据科学家和分析师的首选之一。本文将深入探讨与电子表格处理相关的Python库&#xff0c;介绍它们的功能、应用场景…...

外贸分享|如何从外贸小白成长为大咖?这10件事值得你坚持做

外贸成功不是一朝一夕的事&#xff0c;而是需要有充分的准备和持续的努力。作为一位有着丰富经验的外贸人员&#xff0c;我总结了成功的秘诀&#xff0c;分享了一个优秀的外贸人应该做好的10项工作。 1 找不到客户怎么办&#xff1f; 有很多各种各样的原因值得思考&#xff1a…...

深度学习之六(自编码器--Autoencoder)

概念 自编码器(Autoencoder)是一种神经网络架构,用于无监督学习和数据的降维表示。它由两部分组成:编码器(Encoder)和解码器(Decoder)。 结构: 编码器(Encoder): 接收输入数据并将其压缩为潜在表示(latent representation),通常比输入数据的维度要低。编码器的…...

Docker Swarm总结+基础、集群搭建维护、安全以及集群容灾(1/3)

博主介绍&#xff1a;Java领域优质创作者,博客之星城市赛道TOP20、专注于前端流行技术框架、Java后端技术领域、项目实战运维以及GIS地理信息领域。 &#x1f345;文末获取源码下载地址&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb;…...

Vim 一下日志文件,Java 进程没了?

一次端口告警&#xff0c;发现 java 进程被异常杀掉&#xff0c;而根因竟然是因为在问题机器上 vim 查看了 nginx 日志。下面我将从时间维度详细回顾这次排查&#xff0c;希望读者在遇到相似问题时有些许启发。 时间线 15:19 收到端口异常 odin 告警。 状态:P1故障 名称:应用端…...

C# Dictionary的使用

在 C# 中&#xff0c;Dictionary 是一种常用的数据结构&#xff0c;用于存储键值对。以下是一些常见的 Dictionary 操作&#xff1a; 创建和初始化一个 Dictionary 可以使用以下代码创建并初始化一个 Dictionary&#xff1a; Dictionary<string, int> dict new Dicti…...

解决DaemonSet没法调度到master节点的问题

最近在kubernetes部署一个springcloud微服务项目&#xff0c;到了最后一步部署边缘路由&#xff1a;使用nginx-ingress和traefik都可以&#xff0c;必须使用DaemonSet部署&#xff0c;但是发现三个节点&#xff0c;却总共只有两个pod。 换句话说&#xff0c; DaemonSet没法调度…...

2023.11.20 关于 Spring MVC 详解

目录 MVC 工作流程 Spring MVC 掌握三个功能 创建 Spring MVC 项目 推荐安装插件 EditStarters 基础注解 RequestMapping 指定 GET 和 POST 方法类型 ResponseBody 获取参数 传递 单个 或 多个参数 参数重命名 RequestParam 接收 JSON 对象 RequestBody 获取 …...

救命~终于找到一款好看又舒适的家居服了

暖乎乎的软糯家居服 简直不要太好看太舒服了 双层舒棉绒舒适又暖和 防风收口设计&#xff0c;时尚与实用性兼具 经典版型不挑人穿 居家外出都可哦&#xff01;&#xff01;...

C#每天复习一个重要小知识day5:枚举与switch是天生一对

因为枚举一般用来表示条件和类型等等&#xff0c;所以它一般用条件分支来表现。所以枚举与switch是天生一对&#xff0c;因为很方便。&#xff08;用if语句也可&#xff0c;但是没switch方便&#xff09; 简单的举例&#xff1a; namespace 精细练习 {enum E_Player {Main,Ot…...

idea修改行号颜色

前言 i当idea用了深色主题后&#xff0c;发现行号根本看不清&#xff0c;或者很模糊 例如下面这样 修改行号颜色 在IntelliJ IDEA中&#xff0c;你可以根据自己的喜好和需求定制行号的颜色。下面是修改行号颜色的步骤&#xff1a; 打开 IntelliJ IDEA。 转到 “File”&…...

U-boot(四):start_armboot

本文主要探讨210的uboot启动的第二阶段&#xff0c;主要函数为start_armboot。 uboot 一阶段初始化SoC内部部件(看门狗、时钟等),初始化DDR,重定位 二阶段初始化其余硬件(iNand、网卡芯片)以及命令、环境变量等 启动打印硬件信息,进入bootdelay,读秒完后执行bootc…...

.Net面试题4

1.请解释一下泛型&#xff08;Generics&#xff09;在C#中的作用。 泛型是一种将数据类型参数化的机制&#xff0c;使得代码可以在编译时具有更强的类型安全性和灵活性。C#中的泛型可以用于类、接口、方法等的定义和实例化。泛型允许在编写代码时使用具有不同实参的类型&#x…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...