react中的useCallback、useMemo、useRef 和 useContext

hook函数中依赖项:函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。

前言

一、useCallback  缓存回调函数

使用方式 

二、useMemo:缓存计算的结果

三、useRef:在多次渲染之间共享数据

四、useContext:定义全局状态 

总结


前言

上一个文章中我们讲述了useState 和 useEffect 这两个最为核心的 Hooks 的用法。理解了它们,基本上就掌握了 React 函数组件的开发思路。


在 React 函数组件中,每一次 UI 的变化,都是通过重新执行整个函数来完成的,这和传统的 Class 组件有很大区别:函数组件中并没有一个直接的方式在多次渲染之间维持一个状态。

一、useCallback  缓存回调函数

比如下面的代码中,我们在加号按钮上定义了一个事件处理函数,用来让计数器加 1。但是因为定义是在函数组件内部,因此在多次渲染之间,是无法重用 handleIncrement 这个函数的,而是每次都需要创建一个新的:

使用方式 

function Counter() {const [count, setCount] = useState(0);const handleIncrement = () => setCount(count + 1);// ...return <button onClick={handleIncrement}>+</button>
}
useCallback(fn, deps)

不妨思考下这个过程。每次组件状态发生变化的时候,函数组件实际上都会重新执行一遍。在每次执行的时候,实际上都会创建一个新的事件处理函数 handleIncrement。这个事件处理函数中呢,包含了 count 这个变量的闭包,以确保每次能够得到正确的结果。

这也意味着,即使 count 没有发生变化,但是函数组件因为其它状态发生变化而重新渲染时,这种写法也会每次创建一个新的函数。创建一个新的事件处理函数,虽然不影响结果的正确性,但其实是没必要的。因为这样做不仅增加了系统的开销,更重要的是:每次创建新函数的方式会让接收事件处理函数的组件,需要重新渲染。

比如这个例子中的 button 组件,接收了 handleIncrement ,并作为一个属性。如果每次都是一个新的,那么这个 React 就会认为这个组件的 props 发生了变化,从而必须重新渲染。因此,我们需要做到的是:只有当 count 发生变化时,我们才需要重新定一个回调函数。而这正是 useCallback 这个 Hook 的作用。

修改后

import React, { useState, useCallback } from 'react';function Counter() {const [count, setCount] = useState(0);const handleIncrement = useCallback(() => setCount(count + 1),[count], // 只有当 count 发生变化时,才会重新创建回调函数);// ...return <button onClick={handleIncrement}>+</button>
}

这样,只有 count 发生变化的时候,才需要重新创建一个回调函数,这样就保证了组件不会创建重复的回调函数。而接收这个回调函数作为属性的组件,也不会频繁地需要重新渲染。

二、useMemo:缓存计算的结果

代码如下(示例):

useMemo(fn, deps);

这里的 fn 是产生所需数据的一个计算函数。通常来说,fn 会使用 deps 中声明的一些变量来生成一个结果,用来渲染出最终的 UI。

这个场景应该很容易理解:如果某个数据是通过其它数据计算得到的,那么只有当用到的数据,也就是依赖的数据发生变化的时候,才应该需要重新计算。 

通过 useMemo 这个 Hook,可以避免在用到的数据没发生变化时进行的重复计算。如果是一个复杂的计算,那么对于提升性能会有很大的帮助。这也是 userMemo 的一大好处:避免重复计算

除了避免重复计算之外,useMemo 还有一个很重要的好处:避免子组件的重复渲染。如果一个子组件的属性的值被缓存了,一旦能够缓存上次的结果,就和 useCallback 的场景一样,可以避免很多不必要的组件刷新。

useCallback 的功能其实是可以用 useMemo 来实现的。

 const myEventHandler = useMemo(() => {// 返回一个函数作为缓存结果return () => {// 在这里进行事件处理}}, [dep1, dep2]);

从本质上来说,它们只是做了同一件事情:建立了一个绑定某个结果到依赖数据的关系。只有当依赖变了,这个结果才需要被重新得到。

三、useRef:在多次渲染之间共享数据

函数组件虽然非常直观,简化了思考 UI 实现的逻辑,但是比起 Class 组件,还缺少了一个很重要的能力:在多次渲染之间共享数据。

在类组件中,我们可以定义类的成员变量,以便能在对象上通过成员属性去保存一些数据。但是在函数组件中,是没有这样一个空间去保存数据的。因此,React 让 useRef 这样一个 Hook 来提供这样的功能。

const myRefContainer = useRef(initialValue);

使用 useRef 保存的数据一般是和 UI 的渲染无关的,因此当 ref 的值发生变化时,是不会触发组件的重新渲染的,这也是 useRef 区别于 useState 的地方。

除了存储跨渲染的数据之外,useRef 还有一个重要的功能,就是保存某个 DOM 节点的引用。

四、useContext:定义全局状态 

React 组件之间的状态传递只有一种方式,那就是通过 props。这就意味着这种传递关系只能在父子组件之间进行。

看到这里你肯定会问,如果要跨层次,或者同层的组件之间要进行数据的共享,那应该如何去实现呢?这其实就涉及到一个新的命题:全局状态管理。为此,React 提供了 Context 这样一个机制,能够让所有在某个组件开始的组件树上创建一个 Context。

这样这个组件树上的所有组件,就都能访问和修改这个 Context 了。那么在函数组件里,我们就可以使用 useContext 这样一个 Hook 来管理 Context。

const value = useContext(MyContext);

Context 提供了一个方便在多个组件之间共享数据的机制。不过需要注意的是,它的灵活性也是一柄双刃剑。你或许已经发现,Context 相当于提供了一个定义 React 世界中全局变量的机制,而全局变量则意味着两点:

  1. 会让调试变得困难,因为你很难跟踪某个 Context 的变化究竟是如何产生的。
  2. 让组件的复用变得困难,因为一个组件如果使用了某个 Context,它就必须确保被用到的地方一定有这个 Context 的 Provider 在其父组件的路径上。

所以在 React 的开发中,除了像 Theme、Language 等一目了然的需要全局设置的变量外,我们很少会使用 Context 来做太多数据的共享。需要再三强调的是,Context 更多的是提供了一个强大的机制,让 React 应用具备定义全局的响应式数据的能力。


总结

最后来总结一下今天的所学。在这节课,你看到了 4 个常用的 React 内置 Hooks 的用法,包括:useCallback、useMemo、useRef 和 useContext。

事实上,每一个 Hook 都是为了解决函数组件中遇到的特定问题。因为函数组件首先定义了一个简单的模式来创建组件,但与此同时也暴露出了一定的问题。所以这些问题就要通过 Hooks 这样一个统一的机制去解决,可以称得上是一个非常完美的设计了。

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

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

相关文章

Spring MVC概述

1.1 MVC设计模式 MVC&#xff08;Model-View-Controller&#xff09;是一种软件设计模式&#xff0c;旨在将应用程序的业务逻辑、用户界面和用户输入分离。Spring MVC遵循这一模式&#xff0c;提供了以下几个核心组件&#xff1a; Model&#xff1a;表示应用程序的数据和业务…

sqlite3 数据库

1.sqlite3 相关命令&#xff1a; .tables 查看数据库中的表 .headers on/off 开启或者关闭表头 .width 设置列宽 .mode column 对齐 .schema 查询表头类型 2.sqlite3 的sql语句&#xff1a; 插入数据&#xff1a;insert into 表名 values; 查询表&#xff1a;select …

mysql的半同步模式

1.半同步模式原理 mysql的主备库通过binlog日志保持一致&#xff0c;主库本地执行完事务&#xff0c;binlog日志落盘后即返回给用户&#xff1b;备库通过拉取主库binlog日志来同步主库的操作。默认情况下&#xff0c;主库与备库并没有严格的同步&#xff0c;因此存在一定的概率…

ocp19c 学习第1篇

1.操作系统镜像&#xff0c;安装学习环境 通过网盘分享的文件&#xff1a;12-V995537-01.iso 链接: https://pan.baidu.com/s/1nYeKMSM-gwsJon9kpCs_Fw?pwd5537 提取码: 5537 2.linux7防火墙设置 linux7防火墙设置[rootocp4 ~]# systemctl status firewalld.service[rootoc…

【C++】如何解决“pointer to incomplete class type is not allowed”。

这个错误信息 “pointer to incomplete class type is not allowed” 在 C 中通常表示你正在尝试使用一个尚未完全定义的类的指针。 可能的原因及解决方法如下&#xff1a; 一、类定义不完整 前向声明后就使用指针&#xff1a; 如果你只是对一个类进行了前向声明&#xff08…

linux下一切皆文件,如何理解?

linux下一切皆文件&#xff0c;不管你有没有学过linux&#xff0c;都应该听过这句话&#xff0c;就像java的一切皆对象一样。 今天就来看看它的真面目。 你记住了&#xff0c;只要一个竞争退出它的PCB要被释放文件名&#xff0c;客服表也要被释放。那么&#xff0c;指向这个文件…

第100+23步 ChatGPT学习:概率校准 Sigmoid Calibration

基于Python 3.9版本演示 一、写在前面 最近看了一篇在Lancet子刊《eClinicalMedicine》上发表的机器学习分类的文章&#xff1a;《Development of a novel dementia risk prediction model in the general population: A large, longitudinal, population-based machine-learn…

0.0 C语言被我遗忘的知识点

文章目录 位移运算(>>和<<)函数指针函数指针的应用场景 strcmp的返回值合法的c语言实数表示sizeof 数组字符串的储存 —— 字符数组与字符指针字符串可能缺少 \0 的情况 用二维数组储存字符串数组其他储存字符串数组的方法 位移运算(>>和<<) 右移(>…

c++中的匿名对象及内存管理

c中的匿名对象 A a;//a的生命周期在整个main函数中 a.Sum(1); //匿名对象生命周期只有一行&#xff0c;只有这一行会创建对象,出了这一行就会调析构 A().Sum(1);//只有这一行需要这个对象&#xff0c;其他地方不需要。 return 0; 日期到天数的转换 计算日期到天数转换_牛客…

Linux不可靠信号和可靠信号

1.不可靠信号和可靠信号 建立在早期的信号处理机制上**(1~31)的信号是不可靠信号** 不支持排队、可能会丢失&#xff0c;如果同一个信号连续产生多次&#xff0c;进程可能只相应了一次 如果解除屏蔽&#xff0c;取决于可靠性&#xff01;&#xff01;&#xff01;1 建立在新的信…

pytest自定义命令行选项

在 pytest 中&#xff0c;您可以通过多种方式自定义命令行选项。以下是一些常用的方法&#xff1a; 使用 pytest 的 addoption 方法 您可以在 conftest.py 文件中使用 pytest_addoption 钩子函数来添加自定义命令行选项。 下面是一个示例&#xff0c;展示如何添加一个名为 --…

python 执行mysql文件

MySQL 5.7 之前的版本在某些方面对存储过程的支持可能有限&#xff0c;通过 Python 脚本调用 SQL 文件是一种有效的方法来自动化数据库任务和提高运维效率。具体操作如下&#xff1a; # python 执行sql脚本 def execute_sql_script(mysql_params, script_name):# 使用 with 语…

硬件调试经验积累 关于RTC 时钟问题。

1. 电脑的 RTC 问题可以排查有这几个地方 1. 硬件问题 2. BIOS 问题 3. 系统问题 2. 排查问题大致的操作 1. 使用计算系统xx 通讯读取 RTC 芯片的寄存器&#xff0c;查看芯片是否有问题。 2. 再BIOS 下查看时钟是否准确。 查看芯片的连接性是否有问题。 3..多次----断电后开机…

【鸿蒙样式初探】多个组件如何共用同一样式

最近开发鸿蒙&#xff0c;刚接触难免二和尚摸不着头脑&#xff0c;尤其是样式...... 背景 在做银行卡显示的一个小需求时&#xff1a; 每个Text都需要设置fontColor:#FFFFFF" 想着是否可以简单点 解决历程 思路一&#xff1a;&#xff08;拒绝) 使用Styles 提取封装公…

虚拟化、双层虚拟化、容器是什么,应用场景有哪些

一、基本概念 虚拟化是一种资源管理技术&#xff0c;通过将计算机的实体资源&#xff08;如CPU、内存、磁盘空间和网络适配器等&#xff09;进行抽象和转换&#xff0c;使其能够被分割、组合成一个或多个电脑配置环境。多层虚拟化则是在虚拟化的基础上&#xff0c;再进行一次虚…

爆改YOLOv8|利用可改变核卷积AKConv改进yolov8-轻量涨点

1&#xff0c;本文介绍 AKConv&#xff08;可改变核卷积&#xff09;是一种改进的卷积操作方法&#xff0c;其核心在于动态调整卷积核的形状和大小。与传统卷积层固定核大小不同&#xff0c;AKConv 通过引入可学习的机制&#xff0c;使卷积核在训练过程中能够自适应地调整&…

学生宿舍管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;宿舍公告管理&#xff0c;学生管理&#xff0c;宿舍管理&#xff0c;后勤人员管理&#xff0c;楼栋信息管理&#xff0c;宿舍分配管理管理&#xff0c;退宿信息管理 微信端账号功能包括&#xff1a;系…

程序猿成长之路之数据挖掘篇——Kmeans聚类算法

Kmeans 是一种可以将一个数据集按照距离&#xff08;相似度&#xff09;划分成不同类别的算法&#xff0c;它无需借助外部标记&#xff0c;因此也是一种无监督学习算法。 什么是聚类 用官方的话说聚类就是将物理或抽象对象的集合分成由类似的对象组成的多个类的过程。用自己的…

idea import配置

简介 本文记录idea中import相关配置&#xff1a;自动导入依赖、自动删除无用依赖、避免自动导入*包 自动导入依赖 在编辑代码时&#xff0c;当只有一个具有匹配名称的可导入声明时&#xff0c;会自动添加导入 File -> Settings -> Editor -> General -> Auto Imp…

简而不减,极致便捷!泰极预付费解决方案震撼上市

开户麻烦!绑表复杂!用电情况模糊!电费收缴难! 在日常生活中,能源缴费可能经常会遇到运维难管理、缴费收益难计算、支付安全难保障等问题。如何解决呢?正泰物联推出“泰极预付费解决方案”,“简”操作,“不减”功能,有效解决上述问题,助力实现便捷生活。 享轻松:泰极简而不减…