iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React中useCallbackuseMemo到底该怎么用
  • 333
分享到

React中useCallbackuseMemo到底该怎么用

ReactuseCallbackReactuseMemo 2023-02-06 15:02:01 333人浏览 独家记忆
摘要

目录useCallback记忆函数前言介绍使用useMemo记忆组件两者区别使用useCallback记忆函数 前言 使用缘由: 防止因为组件重新渲染,导致方法被重新创建,起到缓存作

useCallback记忆函数

前言

使用缘由:

防止因为组件重新渲染,导致方法被重新创建,起到缓存作用

类似监听器…监听更新然后执行操作

介绍

防止因为组件重新渲染,导致方法被重新创建,起到缓存作用

使用


 import React, { useState, useCallback, useEffect } from 'react';
 const set = new Set();
 export default function Parent() {
   const [count, setCount] = useState(1);
   const callback = useCallback(() => {
     console.log(count);
     return count
   }, [count]); //count更新时执行
   return (
   <div>
     <h4>parent count:{count}</h4>
     <div>
       <button onClick={() => setCount(count + 1)}>+</button>
     </div>
     <Child callback={callback} />
   </div>
   )
 }
 const Child = ({callback}) =>{
   const [count,setCount] = useState(0);
   useEffect(()=>{
     setCount(callback())
   },[callback]) //当callback更新时执行callback函数,得到parent组件最新的count
   return <child>
     count:{count}
   </child>
 } 

useMemo记忆组件

两者区别

与useCallback的区别

  • useCallback不会执行第一个参数函数,而是将它返回给你,而useMemo会执行第一个函数并且将函数执行结果返回给你
  • 类似监听器…监听更新然后执行操作

使用


 import React, { useState, useMemo } from 'react';
 export default function Memos() {
   const [count, setCount] = useState(1);
   const memo = useMemo(() => {
     console.log("count更新了"+count);
     return count
   }, [count]); //count更新时执行
   return <div>
     <h4>{count}</h4>
     <div>
       <button onClick={() => setCount(count + 1)}>+</button>
     </div>
   </div>;
 }

到此这篇关于React中useCallback useMemo到底该怎么用的文章就介绍到这了,更多相关React useCallback与useMemo内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: React中useCallbackuseMemo到底该怎么用

本文链接: https://www.lsjlt.com/news/194371.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React中useCallbackuseMemo到底该怎么用
    目录useCallback记忆函数前言介绍使用useMemo记忆组件两者区别使用useCallback记忆函数 前言 使用缘由: 防止因为组件重新渲染,导致方法被重新创建,起到缓存作...
    99+
    2023-02-06
    React useCallback React useMemo
  • React 中 memo useMemo useCallback 到底该怎么用
    目录React.memo怎么用React.useMemo怎么用React.memo()和useMemo()的主要区别React.useCallback怎么用memo与useMemo及...
    99+
    2022-11-13
    React memo useMemo useCallback React useMemo useCallback
  • React中的useEffectuseLayoutEffect到底怎么用
    目录前言介绍使用空依赖非空依赖实现销毁操作两者区别前言 使用缘由: 在函数中当请求数据时并且给state赋值会导致整个函数刷新, 从而导致死循环的进行数据请求, 所以这时候可以用到u...
    99+
    2023-02-06
    React useEffect React useLayoutEffect
  • React中useCallbackuseMemo使用方法快速精通
    目录useCallback和useMemo的区别useMemouseCallback首先从简单的讲一下两者的区别 useCallback和useMemo的区别 基本使用 // 贴上...
    99+
    2023-02-14
    React useCallback React useMemo
  • 入门Linux到底该学什么好
    这篇文章将为大家详细讲解有关入门Linux到底该学什么好,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到...
    99+
    2023-06-15
  • SpringBoot中到底该如何解决跨域问题
    目录前言1、跨域访问报错2、同源定义3、跨域问题如何解决?4、CORS原理5、SpringMVC中如何解决跨域问题?6、方案1:方法或者类上标注@CrossOrigin注解7、方案2...
    99+
    2024-04-02
  • React中怎么利用DOM实现动态吸底部
    React中怎么利用DOM实现动态吸底部,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。动态吸底:开始时fixed在页面上,当页面滚动到距离底部...
    99+
    2024-04-02
  • 怎么在React中做到jQuery-free
    这篇文章主要介绍怎么在React中做到jQuery-free,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前言首先我们仍要说的是,jQuery 是现在***的 JavaScript ...
    99+
    2024-04-02
  • react中能不能用到npm
    今天小编给大家分享的是react中能不能用到npm,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。 react中能用到np...
    99+
    2024-04-02
  • vue 中怎么监听滚动条到底部
    今天就跟大家聊聊有关vue 中怎么监听滚动条到底部,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、怎样用纯js判断滚动条是否到底部?先了解几个关键...
    99+
    2024-04-02
  • react中immutable.js怎么用
    这篇文章主要介绍react中immutable.js怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、对于react的来说,如果父组件有多个子组件想象一下这种场景,一个父组件下...
    99+
    2024-04-02
  • react中swipe怎么用
    这篇文章主要介绍了react中swipe怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 react swi...
    99+
    2024-04-02
  • Python 中的协程,到底是怎么回事?
    一.传统的Sync语法请求例子还是一样, 在了解Async语法的实现之前, 先从一个Sync的语法例子开始, 现在假设有一个HTTP请求, 这个程序会通过这个请求获取对应的响应内容, 并打印出来, 代码如下:import socket de...
    99+
    2023-05-14
    代码 Python Async
  • Kotlin中的contract到底有什么用详解
    目录前言测试总结前言 我们在开发中肯定会经常用Kotlin提供的一些通用拓展函数,当我们进去看源码的时候会发现许多函数里面有contract {}包裹的代码块,那么这些代码块到底有什...
    99+
    2024-04-02
  • Python中的类到底是什么
    这篇文章主要介绍“Python中的类到底是什么”,在日常操作中,相信很多人在Python中的类到底是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python中的类到底是什么”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-15
  • React-Native中props怎么用
    这篇文章将为大家详细讲解有关React-Native中props怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。props就是属性,是为了描述一个组件的特征而存在的。...
    99+
    2024-04-02
  • React中key怎么使用
    这篇文章给大家分享的是有关React中key怎么使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在渲染列表时,React的差异比较算法需要一个在列表范围内的唯一key来提高性能...
    99+
    2024-04-02
  • react中context怎么使用
    今天小编给大家分享一下react中context怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
  • react中的modal怎么用
    这篇文章主要介绍了react中的modal怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中的modal怎么用文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • react中map怎么使用
    这篇文章主要介绍了react中map怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中map怎么使用文章都会有所收获,下面我们一起来看看吧。react中map的用法:1、使用“{this.sta...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作