码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【面试准备-react】React.memo和useMemo、useCallback的区别


    1、前言

    在react中,性能优化的点有:

    • 调用setState,就会触发组件的重新渲染,无论前后state是否相同
    • 父组件更新,子组件也会自动更新

    2、定义:

    memo是一个高阶组件,它接收一个组件A作为参数并返回一个组件B,如果组件B的props(或其中的值)没有改变,则组件B会阻止组件A重新渲染。

    useMemo()是一个react hook。使用useMemo(),我们阔以返回记忆值来避免函数的依赖项没有改变的情况下重新渲染。

    3、memo和useMemo的区别:
    1、react.memo()是一个高阶组件,我们可以使用它来包装不想重新渲染的组件,props没有变化,则不会冲性能渲染此组件
    2、useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算

    4、定义:

    useCallback(): 传入两个参数:
    callback(仅仅是个函数),并把要做事情的函数放在callback函数体内执行
    deps 要做事情的函数需要引入的外部参数或者是依赖参
    返回值: 一个memoized回调函数。在依赖参数不变的情况下,返回的回调函数是同一个引用地址
    useCallback配合memo用于优化子组件的渲染次数

    5、useMemo和useCallback的区别:
    1、useCallback优化针对于子组件渲染,返回值是函数。
    2、useMemo优化针对于当前组件高开销的计算。返回值是缓存的变量。

    参考以下:
    memo、useMemo及useCallback解析
    彻底理解 React hook useCallback和useMemo的区别

  • 相关阅读:
    uniapp 使用安卓模拟器运行调试
    JavaScript【DOM概述、节点、节点树 、Node.nodeType属性 、document对象(属性、方法/获取元素、方法/创建元素)、Element对象属性】(十)
    【022】Vue+Springboot+mysql汽车销售系统课设(含源码、数据库、运行教程、实验报告)
    SpringBoot - 如何实现接口幂等性?
    数据库和缓存的一致性如何保证
    《NFT区块链进阶指南二》Etherscan验证Solidity智能合约(Remix插件验证)
    stm32-arm固件开发
    ubuntu18.04创建共享文件夹
    About Statistical Distributions
    UML——时序图
  • 原文地址:https://blog.csdn.net/TanMengyi/article/details/125508649
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号