【React学习打卡第五天】

news2024/11/27 13:38:15

性能优化相关API、编写类API与zustand

  • 一、useReducer
    • 1.基础用法
    • 2.分派action时传参
  • 二、useMemo
    • 1.基础语法
  • 三、React.memo
    • 1.基础语法
    • 2.React.memo - props的比较机制
  • 四、useCallback
    • 基础语法
  • 五、React.forwardRef
  • 六、useInperativeHandle
  • 七、类组件编写
    • 1.基础结构
    • 2.生命周期函数
    • 3.组件通信
  • 八、zustand
    • 1.快速上手
    • 2.异步支持
    • 3.切片模式

一、useReducer

作用:和useState的作用类似,用来管理相对复杂的状态数据

完成案例:
在这里插入图片描述

1.基础用法

  1. 定义一个reducer函数(根据不同的action返回不同的新状态)
  2. 在组件中调用useReducer,并传入reducer函数和状态的初始值
  3. 事件发生时,通过dispatch函数分派一个action对象(通知reducer要返回哪个新状态并渲染UI)
    在这里插入图片描述
    在这里插入图片描述

2.分派action时传参

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、useMemo

作用:在组件每次重新渲染的时候缓存计算的结果

在这里插入图片描述

1.基础语法

在这里插入图片描述
说明:使用useMemo做缓存之后可以保证只有count1依赖项发生变化时才会重新计算

三、React.memo

作用:允许组件在Props没有改变的情况下跳过渲染;React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染

React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染
思考:如果Son组件本身并不需要做渲染更新,是不是存在浪费?

1.基础语法

在这里插入图片描述
说明:经过memo函数包裹生成的缓存组件只有在props发生变化的时候才会重新渲染

2.React.memo - props的比较机制

机制: 在使用memo缓存组件之后,React会对每一个 prop 使用 Object.is 比较新值和老值,返回true,表示没有变化

prop是简单类型
Object.is(3, 3) => true 没有变化
prop是引用类型(对象 / 数组)
Object([], []) => false 有变化,React只关心引用是否变化
传递简单props:
在这里插入图片描述
传递复杂引用类型props:
在这里插入图片描述

四、useCallback

作用:在组件多次重新渲染的时候缓存函数
在这里插入图片描述

基础语法

在这里插入图片描述
说明:使用useCallback包裹函数之后,函数可以保证在App重新渲染的时候保持引用稳定

五、React.forwardRef

使用ref暴露DOM节点给父组件

在这里插入图片描述

在这里插入图片描述

六、useInperativeHandle

通过ref暴露子组件中的方法

在这里插入图片描述
在这里插入图片描述

七、类组件编写

1.基础结构

类组件就是通过JS中的类来组织组件的代码

通过类属性state定义状态数据
通过setState方法来修改状态数据 3.
通过render来写UI模版(JSX语法一致)
在这里插入图片描述

2.生命周期函数

概念:组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数

在这里插入图片描述
componentDidMount:组件挂载完毕自动执行 - 异步数据获取
componentWillUnmount: 组件卸载时自动执行 - 清理副作用

3.组件通信

概念:类组件和Hooks编写的组件在组件通信的思想上完全一致

父传子:通过prop绑定数据
在这里插入图片描述
子传父:通过prop绑定父组件中的函数,子组件调用
在这里插入图片描述
兄弟通信:状态提升,通过父组件做桥接

八、zustand

极简的状态管理工具

官网:https://zustand-demo.pmnd.rs/
在这里插入图片描述

1.快速上手

在这里插入图片描述
在这里插入图片描述

2.异步支持

对于异步的支持不需要特殊的操作,直接在函数中编写异步逻辑,最后只需要调用set方法传入新状态即可

在这里插入图片描述
在这里插入图片描述

3.切片模式

场景:当单个store比较大的时候,可以采用 切片模式 进行模块拆分组合,类似于模块化

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1952170.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】:进程间通信及管道

朋友们、伙计们,我们又见面了,本期来给大家带来进程间通信相关知识点,如果看完之后对你有一定的启发,那么请留下你的三连,祝大家心想事成! C 语 言 专 栏:C语言:从入门到精通 数据结…

“智能体风”吹进体育圈 粉丝手搓上百个智能体为中国健儿应援 太有AI了!粉丝手搓上百个智能体为中国健儿打CALL

智能体的风吹进了体育竞技圈。近日,在百度文心智能体平台,出现了上百个充满“AI”的运动明星粉丝应援智能体,比如支持中国女子乒乓球运动员孙颖莎的“孙颖莎的小迷妹”、支持中国女子跳水队员全红婵的“婵婵的小书包”,应援中国女…

中国医疗AI领头羊讯飞医疗:最新招股书显示前三月收入破亿大关!

讯飞医疗,医疗AI创新企业,收入领先市场。计划港交所上市,用于研发升级、产品扩展及并购。市场潜力巨大,未来发展可期,将成医疗AI璀璨明星。 各位看官,最近科技圈儿又有大新闻啦!讯飞医疗科技股份…

时间序列分析方法之 -- 自回归模型(Autoregressive Model, AR)

目录 原理 适用情况 Python 示例代码 结论 原理 自回归模型(Autoregressive Model, AR)是一种时间序列模型,用于描述一个时间序列的当前值与其过去值之间的关系。自回归模型假设时间序列的当前值是其过去若干值的线性组合,并…

Github 2024-07-26开源项目日报 Top10

根据Github Trendings的统计,今日(2024-07-26统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目2TypeScript项目2C++项目2HTML项目1Python项目1C#项目1Lua项目1JavaScript项目1Vue项目1C项目1免费编程学习平台:freeCodeCamp.org 创…

HANA-sum函数与sum() over(partition by ... order by ... )

sum函数与sum() over(partition by … order by … ) sum()函数就不介绍了。 sum() over(partition by … order by … )其实就是累加的过程具体化。 比如 有1,2,3,4 sum()就会得到10 sum() over(partition by … order by … ) 就会得到:1,3…

leetocde662. 二叉树最大宽度,面试必刷题,思路清晰,分点解析,附代码详解带你完全弄懂

leetocde662. 二叉树最大宽度 做此题之前可以先做一下二叉树的层序遍历。具体题目如下: leetcode102二叉树的层序遍历 我也写过题解,可以先看看学习一下,如果会做层序遍历了,那么这题相对来说会简单很多。 具体题目 给你一棵…

数据结构 链式存储 +

int DeleteLinkList(LinkList *list, char *name); int ReviseLinkList(LinkList *list, char *name, DATATYPE data); int DestroyLinkList(LinkList *list); int InsertTailLinkList(LinkList *list, DATATYPE data); ​​​​​​​删除 修改​​​​​​​ 销毁 ​​​​​…

Anaconda、Pytorch安装

Anaconda 打开 Anaconda 官网 https://www.anaconda.com/ 点击右上角的 Free Download 可以选择相应的型号进行下载 如果版本不合适,可以进入 anaconda 的历史版本官网选择适合本机 python 版本的 anaconda 进行下载: https://repo.anaconda.com/arc…

Django-3.3创建模型

创建模型(models)的时候, 1:我们需要这个模型是哪个文件下面的模型(models),我们需要在配置文件中吧应用安装上(安装应用:INSTALLED_APPS) 2:找对…

【java计算机毕设】在线考试系统java MySQL ssm jsp maven项目设计代码前后端一体 寒暑假小组作业

目录 1项目功能 2项目介绍 3项目地址 1项目功能 2项目介绍 系统功能: ssm在线考试管理系统包括管理员、用户俩种角色。 管理员功能包括在线考试,参加考试,我的成绩,我的错题,资源大全,下载资源&#xf…

GUL图形化界面操作(下部)

目录 ​编辑 前言 Swing 窗口 注意点 新增的组件 进度条组件 开关按钮 多面板和分割面板 多面板 分割面板 ​编辑 选项窗口 对话框带三个选项是,否,取消。 对话框提示输入文本: 前言 修炼中,该篇文章为俺很久前的学习笔记 Swi…

Matlab类阿克曼车机器人运动学演示

v1是后驱动轮轮速, v2是转向角变化速度, 实际上我们只需要关注XQ, YQ和Phi的变化率。 通过这三项和时间步长, 我们就可以计算出变化量, 再结合初始值就能推断出每个时刻的值。 % 清理当前运行环境 % 清除所有变量 cle…

Windosw下Visual Studio2022编译FFmpeg(支持x264、x265、fdk-acc)

FFmpeg 7.0 版本移除了 6.0 之前已弃用的 API,无法向下兼容。所以编译的版本选择FFmpeg 6.1.1。 一、安装Visual Studio2022 可参考另外一篇文章:Windows安装Visual Studio2022 QT5.15开发环境_qt5.15.2 vs2022-CSDN博客 二、安装MSYS2 下载地址&…

企业创建百度百科有什么好处?

现如今,网络越来越发达,网络营销的方法百花齐放,对于企业和品牌来说,想要推广产品,就是提升知名度,让更多的人知道企业和品牌。 而百度现如今在中国的搜索市场上仍是巨头,而在百度上有权威,以及能提升企业知名度的就是百度百科了。 今天&…

Linux基础复习(二)

前言 本文介绍了一下Linux命令行基本操作及网络配置 一、 命令行提示含义 [当前用户主机名 工作目录]$ 若当前用户是root,则最后一个字符为# 否则,最后一个字符为$ 二、常用Linux命令及其解释 修改主机名 一般在创建一台主机后会使用hostname相关命…

《python程序语言设计》第6章13题 数列求和编写一个函数计算

正确代码 def sumNumber(integer_num):print(" i || m(i)")print("-"*30)a 0for i in range(1, integer_num 1):a i / (i 1)print("{:4d} || {:.4f}".format(i, a))sumNumber(20)结果如下

win11 安装 Gradle

一、win11 安装Gradle(7.5.1): 1.1、下载二进制包 Gradle下载页面 1.2、配置环境变量 变量名:GRADLE_HOME 变量值(二进制包解压路径):D:\develop-tool\gradle-7.5.1 变量名:GRADLE_USER_HOME 变量值&a…

qt总结--翻金币案例

完成了一个小项目的在qt5.15.2环境下的运行,并使用NSIS editNSIS打包完成.有待改进之处:增加计时功能,随机且能通关功能,过关后选择下一关功能.打包后仅仅有安装包有图标 安装后应用图标并未改变 在qt .pro中有待改进对qt的基本操作和帮助文档有了基本的认识.对C制作小游戏有了…

Linux-IO操作之fcntl 和 ioctl

fcntl函数,也就是file control,提供了对文件描述符的各种操作。另一个常见的控制文件描述符的属性和行为的系统调用是ioctl,而且ioctl比fcntl能够执行更多的控制。但是,对于控制文件描述符常见的属性和行为,fcntl函数是…