React 第二十七章 Hook useCallback

useCallback 是 React 提供的一个 Hook 函数,用于优化性能。它的作用是返回一个记忆化的函数,当依赖发生变化时,才会重新创建并返回新的函数。

在 React 中,当一个组件重新渲染时,所有的函数都会被重新创建。这可能会导致一些问题,特别是在涉及到将函数作为 prop 传递给子组件时,因为每次父组件重新渲染时,子组件都会接收到一个新的函数 prop,从而触发子组件的不必要的重新渲染。

使用 useCallback 可以避免这个问题。它接收两个参数:一个回调函数和一个依赖数组。当依赖数组中的值发生变化时,返回的回调函数会被重新创建,否则会返回之前创建的回调函数。

示例代码

App 根组件,引入了 ChildCom1ChildCom2 这两个子组件:

import { useState } from 'react';
import ChildCom1 from "./components/ChildCom1"
import ChildCom2 from "./components/ChildCom2"import styles from "./css/App.module.css"function App() {const [counter, setCounter] = useState(0);console.log("App渲染了")return (<div className={styles.container}><div className={styles.btnContainer}><div>{counter}</div><button onClick={() => setCounter(counter + 1)}>+1</button></div><div className={styles.childComContainer}><ChildCom1 /><ChildCom2 /></div></div>);
}export default App;

ChildCom1 子组件:

import { useState } from "react"
function ChildCom1() {const [counter, setCounter] = useState(0);console.log("ChildCom1 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom1<div>{counter}</div><button onClick={() => setCounter(counter + 1)}>+1</button></div>);
}export default ChildCom1;

ChildCom2 组件基本相同

此时在我们的应用中,各个组件内部维护了自身的数据,组件内部数据的更新并不会影响到同级组件和祖级组件。效果如下:

iShot_2022-12-02_15.46.37

可以看到,父组件的更新会导致两个子组件更新,这是正常的,子组件各自的更新不会影响其他组件。

但是,倘若两个子组件的数据都来自于父组件,情况就不一样了。

这里我们把上面的代码稍作修改,如下:

App.jsx 根组件,为两个子组件提供了数据以及修改数据的方法

import { useState } from 'react';
import ChildCom1 from "./components/ChildCom1"
import ChildCom2 from "./components/ChildCom2"import styles from "./css/App.module.css"function App() {const [counter, setCounter] = useState(0);const [counter1, setCounter1] = useState(0);const [counter2, setCounter2] = useState(0);console.log("App渲染了")return (<div className={styles.container}><div className={styles.btnContainer}><div>{counter}</div><button onClick={() => setCounter(counter + 1)}>+1</button></div><div className={styles.childComContainer}><ChildCom1 counter={counter1} setCounter={setCounter1}/><ChildCom2 counter={counter2} setCounter={setCounter2}/></div></div>);
}export default App;

ChildCom1 子组件接收从父组件传递过来的数据,并调用父组件传递过来的方法修改数据

function ChildCom1(props) {console.log("ChildCom1 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom1<div>{props.counter}</div><button onClick={() => props.setCounter(props.counter + 1)}>+1</button></div>);
}export default ChildCom1;

效果如下:

iShot_2022-12-02_15.52.31

可以看到,在更新子组件的数据时,由于数据是从父组件传递下去的,相当于更新了父组件数据,那么父组件就会重新渲染,最终导致的结果就是父组件下面所有的子组件都重新渲染了。

首先,我们会想到使用前面所讲的 React.memo 来解决这个问题,如下:

import React from "react"
function ChildCom1(props) {console.log("ChildCom1 渲染了")return (<div style={{width: "200px",height: "100px",border: "1px solid"}}>ChildCom1<div>{props.counter}</div><button onClick={() => props.setCounter(props.counter + 1)}>+1</button></div>);
}// 相同的 props 传入的时候该组件不需要重新渲染
export default React.memo(ChildCom1);

在上面的代码中,我们使用 React.memo 来缓存 ChildCom1 组件,这样在相同的 props 传入时,该组件不会重新渲染。

但是假设此时 App 组件还有一个单独的函数传入,那就不那么好使了:

function App() {// App 组件自身有一个状态// ...console.log("App 渲染了")function test() {console.log("test");}return (<div className={styles.container}>{/* ... */}<div className={styles.childComContainer}><ChildCom1 counter={counter1} setCounter={setCounter1} test={test} /><ChildCom2 counter={counter2} setCounter={setCounter2} test={test} /></div></div>);
}

在上面的代码中,我们还向两个子组件传入了一个 test 函数,由于每次 App 组件的重新渲染会生成新的 test 函数,所以对于两个子组件来讲传入的 test 导致 props 不同所以都会重新渲染。

此时就可以使用 useCallback 来解决这个问题,语法如下:

const memoizedCallback = useCallback(() => {doSomething(a, b);},[a, b],
);

把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新。

接下来我们来使用 useCallback 优化上面的问题,对 App.jsx 做如下的修改:

import React, { useState, useCallback } from 'react';
import ChildCom1 from "./components/ChildCom1"
import ChildCom2 from "./components/ChildCom2"import styles from "./css/App.module.css"function App() {const [counter, setCounter] = useState(1); // 这是 App 组件自身维护的状态const [counter1, setCounter1] = useState(1); // 这是要传递给 ChildCom1 组件的数据const [counter2, setCounter2] = useState(1); // 这是要传递给 ChildCom2 组件的数据console.log("App组件渲染了")// 每次重新渲染的时候,就会生成一个全新的 test 函数// 使用了 useCallback 之后,我们针对 test 函数做了一个缓存  const newTest = useCallback(function test(){console.log("test触发了")},[])return (<div className={styles.container}>{/* 自身的计数器 */}<div className={styles.btnContainer}><div>counter:{counter}</div><button onClick={() => setCounter(counter + 1)}>+1</button></div>{/* 使用子组件 */}<div className={styles.childComContainer}><ChildCom1 counter={counter1} setCounter={setCounter1} test={newTest}/><ChildCom2 counter={counter2} setCounter={setCounter2} test={newTest}/></div></div>);
}export default App;

在上面的代码中,我们对 test 函数做了缓存,从而保证每次传入到子组件的这个 props 和之前是相同的。

注意

  • 记住:useCallback 主要就是对函数进行缓存
  • 使用 useCallback 可以提高性能,避免不必要的重渲染。但需要注意的是,过度使用 useCallback 也可能会导致性能问题,因为每次依赖数组的值发生变化时,都会触发函数的重新创建。因此,需要结合具体的场景和需求来决定是否使用 useCallback

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

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

相关文章

青少年软件编程(Python)等级考试试卷(五级)2024年3月

2024.03 电子学会 青少年软件编程&#xff08;Python&#xff09;等级考试试卷&#xff08;五级&#xff09; 一、单选题 1.以下代码的输出结果是? ) nums list(range(100, 201)) print(nums[::10]) A.[100,110,120,130,140,150,160,170,180,190,200] B.[100,101,1…

QML笔记八

QML与C交互 QML中调用C功能、使用QML或者Quick中的C接口、使用C实现自定义的QML对象 注&#xff1a; 只有QObject的派生类才能与QML交互 QML引擎集成Qt元对象系统&#xff0c;QObject的派生子类的属性、方法、信号都可以在QML中访问 C类可以被注册为一个QML实例 C类可以被注册为…

【Web后端】请求头

1、简介 请求头&#xff08;Request Headers&#xff09;是在HTTP协议中&#xff0c;客户端&#xff08;如浏览器或应用程序&#xff09;向服务器发送请求时附带的元数据。包含了关于请求的额外信息&#xff0c;有助于客户端与服务器之间的有效通信。请求头中的信息可以让服务…

.[sqlback@memeware.net].2700勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 随着信息技术的飞速发展&#xff0c;网络安全问题愈发严峻&#xff0c;其中勒索病毒成为了企业和个人用户面临的重要威胁之一。.[sqlbackmemeware.net].2700勒索病毒作为其中的佼佼者&#xff0c;以其独特的攻击方式和强大的破坏力&#xff0c;引起了广泛关注…

【Go语言入门学习笔记】Part1.梦开始的地方

一、前言 经过一系列的学习&#xff0c;终于有时间来学习一些新的语言&#xff0c;Go语言在现在还是比较时髦的&#xff0c;多一个技能总比不多的好&#xff0c;故有时间来学一下。 二、配置环境 按照网络中已有的配置方法配置好&#xff0c;本人采用了Jetbrain的Goland&#…

DTC 2024回顾丨zData X 多元数据库一体机:开创多元数据库时代部署新范式

导语 在2024“数据技术嘉年华”上&#xff0c;云和恩墨数据库一体机产品总经理刘宇在“数据库极致特性”专题论坛发表了题为《打造多元数据库部署新范式&#xff0c;引领一体化资源池创新之路》的演讲。他深入分析了国产数据库面临的挑战&#xff0c;并详细介绍了云和恩墨如何利…

5.10.1 Pre-Trained Image Processing Transformer

研究了低级计算机视觉任务&#xff08;例如去噪、超分辨率和去雨&#xff09;并开发了一种新的预训练模型&#xff0c;即图像处理变压器&#xff08;IPT&#xff09;。利用著名的 ImageNet 基准来生成大量损坏的图像对。 IPT 模型是在这些具有多头和多尾的图像上进行训练的。此…

Megatron-lm、DeepSpeed

1、为了训练更多的数据、更大的模型&#xff0c;提出了并行训练框架。 2、并行的方式&#xff1a;数据并行、模型并行&#xff08;张量并行、流水线并行&#xff09;。 3、Megatron-LM 综合应用了数据并行&#xff08;Data Parallelism&#xff09;&#xff0c;张量并行&…

内网安全工具之ADExplorer的使用

ADExplorer是域内一款信息查询工具&#xff0c;它是独立的可执行文件&#xff0c;无需安装。它能够列出域组织架构、用户账号、计算机账号登&#xff0c;可以帮助寻找特权用户和数据库服务器等敏感目标。 下载地址&#xff1a;http://live.sysinternals.com/ 连接 下载了ADE…

第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组 拼数字

//bfs只能过40%。 #include<bits/stdc.h> using namespace std; #define int long long int a,b,c,dp[2028]; struct s {int x,y,z;string m; }; map<vector<int>,int>k; signed main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);cin>>a…

Java入门基础学习笔记24——While循环和do-while循环

1、While循环&#xff1a; 例1&#xff1a; package cn.ensource.loop;public class WhileDemo3 {public static void main(String[] args) {// 目标&#xff1a;掌握while循环的书写格式&#xff0c;以及理解其执行流程// 需求&#xff1a;打印多行Hello Worldint i 0;while…

EFCore_创建项目

添加依赖 Microsoft.EntityFrameworkCore Microsoft.EntityFrameworkCore.Tools(Migration工具) 根据使用的DB添加对应依赖&#xff1a; SQL Server&#xff1a;Microsoft.EntityFrameworkCore.SqlServer 添加该依赖时可不添加Microsoft.EntityFrameworkCore&#xff0c;该依…

电工能混到这份上

最近看到某电工师傅发了一篇帖子&#xff0c;大致内容是他在处理一个简单故障的时候居然花了很长的时间。我们一起来看看他遇到的是什么故障吧! plc 控制的一台设备&#xff0c;行走部分靠 2 个脚踏开关控制&#xff08;内部开关量控制方向&#xff0c;电位器控制速度&#xff…

Java:使用BigDecimal、NumberFormat和DecimalFormat保留小数

一、代码和调试结果 1.1 BigDecimal ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fa36749de8124266a730817710fdf737.png) 1.2 DecimalFormat 1.3 NumberFormat 二、原代码 BigDecimalUtil.java 代码 package utils;import java.math.BigDecimal; import jav…

前端模块导入导出方式

不同的导出方式和相应的导入方式&#xff0c;可以提炼成 3 种类型&#xff1a;name、default 和 list。 以下是使用示例&#xff1a; // Name Export | Name Import // 一个“命名”的导出 export const name value import { name } from ...❌ 错误示例&#xff1a; export…

Linux平台和Windows平台互传文件

rz和sz的出发对象都是从Linux出发的&#xff0c;例如sz发送&#xff08;Send&#xff09;从Linux->发送到Windows。 rz 从Windows文件发送到Linux中 先创立一个新文本文件 之后将hello Windows输入到该文本文件中 在显示器上显示里面是否有hello Windows内容 sz发送Lin…

Flutter 中的 PageStorage 小部件:全面指南

Flutter 中的 PageStorage 小部件&#xff1a;全面指南 在Flutter中&#xff0c;PageStorage小部件提供了一种方法来保存和恢复页面间的信息&#xff0c;这对于具有多个页面且需要在这些页面之间共享状态的应用程序非常有用。本文将详细介绍PageStorage的用途、如何使用它以及…

Microsoft Azure AI语音服务

一&#xff1a;文字转语音SDK安装 安装语音 SDK - Azure AI services | Microsoft Learn 二&#xff1a;基于文本转语音Rest API 文本转语音 API 参考 (REST) - 语音服务 - Azure AI services | Microsoft Learn 三&#xff1a;基于文本合成语音 如何基于文本合成语音 - 语…

Retrying,一个神奇优雅的 Python 库

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 一个简单的库&#xff0c;也许能够开启我们的智慧之门&#xff0c; 一个普通的方法&#xff0c;也许能在危急时刻挽救我们于水深火热&#xff0c; 一个新颖的思维方式&#xff0c;也许能…

非成对意象翻译中的内容制约范式再思考

Rethinking the Paradigm of Content Constraints in Unpaired Image-to-Image Translation 非成对意象翻译中的内容制约范式再思考 Xiuding Cai1 2, Yaoyao Zhu1 2, Dong Miao1 2, Linjie Fu1 2, Yu Yao1 2 蔡秀定 1 2 、朱瑶瑶 1 2 、苗东 1 2 、付林杰 1 2 、余瑶 1 2 Corre…