useCallback和memo

2023-11-01 04:10
文章标签 memo usecallback

本文主要是介绍useCallback和memo，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

React.memo

作用

React.memo的作用主要是用于缓存组件，使得组件可以按照业务的需求决定是否来更新的效果，比如业务场景中常见的一个场景，在页面的底部有一个版权说明，一般这是各个模块页面所公用的一个组件，但这个组件基本就是一个静态的文案描述，如果父组件数据变化更新的时候这个抽象出来的版权组件也无需更新，这样可以达到减少页面性能开销的目的。

在线示例

下面设计了一组三个不同效果的Demo做对比，父组件中有两个变量 age 和account传递给子组件，并且在父组件中可以更新这两个值。比较达到的效果如下表所列：

  1. Demo1 正常使用，父组件更新age 和account->父组件更新->子组件更新
  2. Demo2 使用 React.memo 来缓存子组件，父组件更新age 和 account->子组件不会更新
  3. Demo3 使用React.memo的第二个参数来达到选择行的更新，age变化时候子组件更新，account更新时不更新

展示效果如下所示：
在这里插入图片描述
在线Demo

在例子中的没个子组件中都打印出了一些信息，每当子组件重复渲染的时候都会打印出日志。

关键代码

import { useState, memo } from "react";

    从React 中结构赋值的方式引入memo，当然也可以直接使用React.memo的写法

    const MemoChild = memo(() => {console.log("子组件函数MemoChild...");return (<div className="child-container">这是子组件，内容固定，父组件更新的时候，我可以不用更新</div>);
});

      可以看到memo是一个高阶组件，接受一个业务组件即可达到demo2的效果。一般如果子组件是一个纯展示的傻瓜组件，这么写就可以，如果子组件也是有逻辑需要根据父组件的变化来 ”选择性“的更新的时候，这个时候就需要使用第二个参数了。关键代码如下：

      const MemoChild = memo(() => {console.log("子组件函数MemoChild...");return (<div className="child-container">这是子组件，内容固定，父组件更新的时候，我可以不用更新</div>);},(pre, next) => {console.log(pre, next);return pre.age === next.age;}
);

        可以看到，memo的第二个参数也是一个函数，该函数接受两个参数，分别是之前的属性状态值和下一个属性的状态值，那就可以在这里做一些业务的判断来决定子组件是否需要更新，返回true标识前后两个状态值一样，则不更新，返回false则表示前后两个状态的值不一样则会更新，从而达到 子组件”选择性“的去更新的效果类似Demo3
        如果不传的第二个参数的话，默认前后两个状态会做浅比较，根据这个比较的结果来决定子组件是否更新。

        useCallback

        作用

        一言以蔽之其作用就是来缓存某个函数，就好像 useMemo是缓存某个变量一样，useCallback 是用来缓存某个函数。避免一个函数的更新导致某个组件随着一起更新。
        可能这样比较晦涩，直接看一个Demo，就可以理解了。

        在线示例

        例子的目的是希望父组件中能同步展示子组件输入框中输入的值。
        那一般我们会这么写，父组件会传递给子组件一个onChange函数，自子组件会在Input输入框中监听onChang事件，并在每次输入框发生变化的时候去触发父组件传递过来的onChange事件。这样做没有问题，可以达到我们预期的功能，但你会发现每次输入框变化的时候，子组件都会重新更新一遍，但其实在这个场景中，子组件是不需要重新渲染的。只希望父组件能监听到子组件的onChange事件并获取输入的值展示即可。效果如下：
        在这里插入图片描述
        可以看到效果是达到预期的，但是随着输入框的变化，子组件一直在重复渲染。
        原因如下：
        用户输入->触发子组件onChange事件->触发父组件handleChange函数->父组件修改inputTxt的状态值->状态值改变导致父组件重新渲染->handleChange函数体会重新注册一遍->传递给子组件的onChange也会一起变(这个时候的onChange事件和之前的并不一样)->子组件重复渲染
        因为上面的这个逻辑所以才导致了这个现象，所以就出现了useCallback的Hook,来规避这种重复渲染浪费性能的现象。先看使用之后达到的效果如何：

        在这里插入图片描述
        可以看到实现的效果和上面是一样的，但这里使用了useCallback之后就很好的规避了子组件重复渲染的问题。

        在线Demo

        关键代码

        const handleChange = useCallback(e => {setInputTxt(e.target.value);}, []);

          在父组件定义 handleChange 的时候使用 useCallback包裹一下，同样的这里的第二个参数也是依赖项。可以看到用法和 uesMemo, useEffect几乎一样。只是作用的对象有所不一样而已。
          当然子组件也还是需要使用React.memo包裹一下，否则不work

          const Child = memo(props => {console.log("子组件渲染Demo2...");return (<div className="child-container mt10"><Input placeholder="input" onChange={props.onChange} /></div>);
});

            总结

            这里将 memo, useMemo, useCallback 三个Hook放在一起做个对比归纳如下：

            1. React.memo 缓存组件，使得组件可以 ”有选择“的更新
            2. useMemo 缓存某个变量，第二个参数是依赖项。使得函数组件变量变化时候，组件可以”有选择“的去执行某些业务
            3. useCallBack 缓存某个方法，特别是子组件调父组件的场景，避免子组件重复渲染

            http://www.taodudu.cc/news/show-8116571.html

            相关文章：

          • ubuntu 相关软件，库的安装简单使用
          • 安装WINDOWS之后恢复Ubuntu
          • windows和linux双系统安装启动问题
          • STM32基于ST-LINK的命令行结合Bootloader烧录程序
          • U盘装电脑-附带资源下载
          • THINKPAD E40部分问题解疑（抛砖引玉……）
          • 4张TF卡瞎测
          • I.MX6UL核心模块使用连载-TF卡读写测试 （五）
          • 计算100元换成100张5元、1元、5角的穷举算法
          • 基金周评:有限筹码 无限需求
          • 加减乘除话基金(ZT)
          • 与基金经理对话
          • 河南理工大学计算机学院路静,我校2017年度国家自然科学基金工作圆满收官_河南理工大学...
          • 闲品天元基金上半年的操作
          • 《大败局1》 吴晓波
          • 《大败局2》 吴晓波
          • 大败局第一卷——吴晓波
          • 《大败局》笔记
          • 大败局I，秦池。
          • 大败局I，多元化是个陷阱吗？
          • 大败局I，初版序言
          • 大败局感触
          • 社交网络的大败局
          • 书单：《大败局》
          • 大败局I，巨人。
          • 英特尔大败局
          • 《大败局》看完之后，几点感受
          • 大败局
          • 关键时刻意识（MOT）学习笔记
          • 管理者的服务意识

            • 这篇关于useCallback和memo的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


            http://www.chinasem.cn/article/320382。

            相关文章

            Vue内置指令v-once、v-memo和v-pre提升性能？

            Vue内置指令v-once、v-memo和v-pre提升性能？

            前言 Vue的内置指令估计大家都用过不少，例如v-for、v-if之类的就是最常用的内置指令，但今天给大家介绍几个平时用的比较少的内置指令。毕竟这几个Vue内置指令可用可不用，不用的时候系统正常跑，但在对的地方用了却能提升系统性能，下面将结合示例进行详细说明。 一、v-once 作用：在标签上使用v-once能使元素或者表达式只渲染一次。首次渲染之后，后面数据再发生变化时使用了v-once的
            阅读更多...
            【更新】cyのMemo（20240609~）

            【更新】cyのMemo（20240609~）

            序言 节后首日，中期结束，接下来一切即将如期而至，时光像道皮鞭在赶鸭子上架，但似乎还并没有准备好一切。 最近几日，休息得不是很好，状态跌落，但总之手头事情告一段落，可以好好休整几日，韬光养晦。 群里静了许多，大家都很忙碌。 筵席终散，然，命运的交点将于未来邂逅。 有感，且歌一场。 《五月初五登高赋》 囚生端午登高祈福佑，轻语绕梁疾未休。花开叶落人渐朽，日没月升活似囚。丛木泥径盘峰秀，
            阅读更多...
            【React】useCallback和useMemo使用指南

            【React】useCallback和useMemo使用指南

            useCallback和useMemo是React中两个用于优化性能的Hooks。以下是它们的使用指南，分点表示并归纳了关键信息： useCallback useCallback返回一个记忆化的回调函数，该回调函数只在它的依赖项发生改变时才会更新。这对于在组件渲染之间保持稳定的引用特别有用，可以防止不必要的渲染和性能开销。 使用指南： 引入useCallback：从react包中引入us
            阅读更多...
            Docker memo

            Docker memo

            Kitematic, the Docker GUI, runs on Mac OS X and Windows operating systems.  Advanced Package Tool，又名apt-get，是一款适用于Unix和Linux系统的应用程序管理器。最初于1998年发布，用于检索应用程序并将其加载到Debian Linux系统。Apt-get成名的原因之一在于其出色的解决软件
            阅读更多...
            浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别

            浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别

            文章目录 前言一、memo()与PureComponent类组件的区别二、memo()与useMemo()的区别三、useMemo() 和 useEffect() 的区别四、useMemo() 和 useCallback() 的区别 前言 在现在的react开发中，我们经常会使用的一些比较型的hook，都是为了提升性能，起到优化的目的。但是不能为了用而用，这东西不是用的越多越
            阅读更多...
            React@16.x（15）PureComponent 和 memo

            React@16.x（15）PureComponent 和 memo

            目录 1，什么是 PureComponent2，什么是 memo3，举例3.2，优化13.1，优化2-函数位置 4，注意点4.1，为了提升效率，应该尽量使用 `PureComponent`4.2，不要直接改变之前的状态，而是覆盖4.3，为什么不进行深比较？ 1，什么是 PureComponent 纯组件，为了避免不必要的渲染（运行 render）来提升效率。 优化思路：如果一
            阅读更多...
            React（四）memo、useCallback、useMemo Hook

            React（四）memo、useCallback、useMemo Hook

            目录 (一)memo API 1.先想一个情景 2.用法 (1)props传入普通数据类型的情况  (2)props传入对象的情况 (3)props传入函数的情况 (4)使用自定义比较函数 3.什么时候使用memo？ (二)useMemo Hook 1.用法 2.useMemo实现组件记忆化  3.useMemo实现函数记忆化 (三)useCallback Hook 1
            阅读更多...
            react18【系列实用教程】useCallback —— 缓存函数 （2024最新版）

            react18【系列实用教程】useCallback —— 缓存函数 （2024最新版）

            当父组件向子组件传递了函数，也会引发 memo 缓存组件失效，因为函数也是引用类型的数据，父组件重新渲染时，传给子组件的函数的内存地址也会重新生成，引发子组件重新渲染。 const printNum = () => {console.log("打印 num ：", num);}; <Child2 printNum={printNum} /> useCallback 的使用场景
            阅读更多...
            React: memo

            React: memo

            React.memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。 const MemoizedComponent = memo(SomeComponent, arePropsEqual?) React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件，当它的父组件重新渲染时，只要它的新 props 与旧 props 相同时，React 就不会重新渲
            阅读更多...
            react组件渲染性能优化之函数组件-useCallback使用

            react组件渲染性能优化之函数组件-useCallback使用

            useCallback主要就是对函数进行缓存,useCallBack这个Hooks主要是解决React.memo不能缓存事件的问题 useCallBack(fn, dependencies) ：fn想要缓存的函数，dependencies有关是否更新 fn 的所有响应式值的一个列表 比如：UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3，
            阅读更多...

            Copyright China编程 23002807@qq.com

            沪ICP备2023033072号-2