React中的useCallback和useMemo

最新推荐文章于 2024-08-07 00:20:35 发布

湖边看客

最新推荐文章于 2024-08-07 00:20:35 发布

阅读量346

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/VVVVV16/article/details/127577189

版权

useCallback

使用这个useCallback 进行函数记忆原因就是我们useState 是可以记住状态的

但是我们自己定义的是没有记忆的功能的

就算你每次++ 它还是0

就不能复用

这样包裹一下就算你重新set 状态

函数组件重新刷新这个handleChange的函数却会被缓存下来

如果我们只传入一个空数组

虽然这个handleChange函数被缓存了下来

但是里面的数据却还是当时的并没有随着之后的更新而进行更新

我们只需要将这个函数的依赖传进这个数组里面就行了

这个useMemo

和useCallback 一样但是 useCallback是将保存的函数体返回给你

而useMeno 是将保存的函数体的运算结果交给你

带上依赖!!!

写法如下

这个功能类似于 vue中的computed 计算属性

直接拿过来使用就行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

湖边看客

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【React】useCallback和useMemo使用指南

读心悦

06-11

572

在组件内部使用。

react：memo、useMemo、useCallback的区别

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

05-15

909

当我们谈论React性能优化时，有三个关键函数不容忽视：React.memo、useMemo和useCallback。今天，我们就来深入解析一下这些函数的使用场景，帮助大家更好地理解它们的用途和效果。此外，关于技术选择和个人偏好，我想分享一下我的观点。我个人偏爱Vue的简洁与直观，能够让我们更专注于业务开发而无需过度关注性能优化。而 React 的性能优化技术我并不喜欢。就像手动挡和自动挡汽车的选择，两者确实都有其独特之处。手动挡汽车提供了更多的操作自由度，但对于很多驾驶者来说，汽车就是要易用。

参与评论您还未登录，请先登录后发表或查看评论

useCallback 与 useMemo

如故的博客

09-03

552

useCallback 与 useMemo useCallBack 参数：一个内联回调函数依赖项数组返回值：该回调函数的 memoized 版本（可以理解为该回调函数被缓存起来了）只有当依赖项发生改变时，这个回调函数才会重新生成。使用场景举例：如果你需要将一个函数作为props传给子组件，并且子组件内部进行了一些优化，比如判断一下props改变时才重新渲染。那么就可以将这个函数使用 useCallback 进行缓存，传入这个函数的 memoized 版本。当父组件更新时，这个 memo

useCallback和useMemo

small_cutey的博客

03-24

1768

useCallback和useMemo react-hooks

useCallback 和 useMemo 详解及区别

qq_56489674的博客

06-17

1785

这两个 Hooks 都可以帮助我们优化性能，但它们的用途和返回值有所不同。主要用于避免在每次渲染时都重新创建函数，而useMemo主要用于避免在每次渲染时都进行复杂的计算和重新创建对象。

【React Hooks原理 - useCallback、useMemo】

weixin_44273311的博客

07-05

2012

从源码出发结合图文梳理了useCallback、useMemo这两个hook的基本原理和使用，以及解决了什么类型的问题

useCallback和useMemo一点通

星海拾遗

04-12

880

useCallback和useMemouseCallback和useMemo的区别useMemouseCallback 首先从简单的讲一下两者的区别 useCallback和useMemo的区别基本使用 // 贴上代码片利于复制 import { React, useState, useMemo, useCallback } from "react"; export default function TestPage() { const callBack = useCallback(() =&

【React篇】useMemo和useCallback的区别

AI小美好

06-21

506

【React篇】useMemo和useCallback的区别

React Hooks memo、useMemo 以及 useCallback 的使用详解

why404

05-24

419

memo、useMemo 以及 useCallback 是三个常用的 React Hooks，它们可以帮助您优化组件的性能。但是，过度使用这些 Hooks 可能会降低代码的可读性和可维护性。因此，在使用这些 Hooks 之前，需要仔细考虑组件的性能需求。只有在子组件渲染成本比较高的情况下，才考虑使用 memo 缓存组件。只有在函数的计算成本比较高的情况下，才考虑使用 useMemo 缓存函数的返回值。只有在函数需要在多个地方使用的情况下，才考虑使用 useCallback 缓存函数的引用。

React性能优化之useCallback与useMemo

u010651383的专栏

05-03

1266

React性能优化之useCallback与useMemo useMemo 当我们在写一个函数式组件时，经常会遇到非依赖的变量改变导致某些方法重新执行，造成性能浪费，这个时候，我们可以考虑使用useMemo对我们的值进行缓存，只有当这个值的依赖项改变时，我们采取重新执行方法获取新值，否则直接从缓存中获取上一次的值直接返回。场景与示例我们来看下面这段伪代码： function Demo(){ const [count, setCount] = useState<number>(0)

什么时候使用useCallback和useMemo?

WindyXYW的博客

08-09

3293

1. 什么是useCallback和useMemo？ useCallback 和 useMemo 都是react可用于性能优化的内置hooks。两者的区别在于：useCallback缓存的是一个函数，而useMemo缓存的是计算结果。其使用语法如下： // useCallback // 第一个参数是一个回调函数，useCallback会缓存这个函数，返回缓存的回调函数 // 第二个参数是依赖项，只有当依赖项改变时，才会重新创建这个函数 con...

React中的useMemo和useCallback

MoaKap的专栏

06-29

604

React中的useMemo和useCallback 先看看二者的基本定义 useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 返回一个带有缓存（记忆）功能的值。输入 create函数（用来创建/生成要缓存的值，所以叫create函数）依赖项列表（指明什么时候需要重新计算并覆盖之前缓存的值） useMemo仅在某个依赖项改变时才会触发重新计算。这种优化可以避免在每次渲染时都进

一文讲透useMemo和useCallback

caixin185的博客

07-24

4629

相同点：useCallback 和 useMemo 都是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate，判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。不同点：useCallback 和 useMemo 的区别是useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件。

useCallback 和 useMemo 及区别

MFWSCQ的博客

04-09

8455

useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 返回一个 memoized 回调函数。把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时...

React 中的 useMemo 和 useCallback

最新发布

越陌度阡

08-07

592

useCallback优化示例：定义一个子组件在父组件中调用，当父组件更新重新渲染时，子组件也会重新渲染。然后我们对子组件加了memo对传入的参数进行检测，同时对传入子组件的方法使用useCallback进行缓存，这样当父组件在更新时，缓存的方法没有发生变化，子组件通过memo发现传入的方法没有发生改变，也就不会重新渲染，以此提高了性能。

useCallback和useMemo和memo用法、区别

CurtainR的博客

07-08

1135

useCallback 、useMemo、memo的用法以及区别用法由来当数据重新赋值时，整个组件会刷新渲染，当数据功能复杂且多，且部分数据无需刷新时，会被强制刷新，造成性能浪费，也可能会产出bug。那么这时候就需要用上useCallback和useMemo来缓存不需要重新加载的数据。 useCallback 的用法假设存在A组件，A组件里存在函数F1，用法场景有： F1是组件加载时调用，里面有用到外部 ...

深入了解 useMemo 和 useCallback

p1967914901的博客

09-21

4705

许多人对 `useMemo` 和 `useCallback`的理解和使用都不太正确，他们都对这两个钩子感到困惑。本文中的目标就是要澄清所有这些困惑。本文将学习它们是做什么的，为什么它们是有用的，以及如何最大限度地利用它们。本文的目的是帮助初学者 or 中级 React 开发人员更好地使用 React。如果你刚刚开始使用 React，你可能会希望将这篇文章收藏起来，几周后再回来看它！

react useMemo useCallback 作用

qq_42339350的博客

03-05

299

前言 useMemo和useCallback是作为性能优化的，减少一些不必要的渲染 useMemo 对值的优化，如果这个值是依赖于某个值计算来的，我不希望其他state变化的时候，这个值也被重新渲染。 function Test1 (props) { const [a,seta]=useState(0) const [b,setB]=useState(0) function getRes() { console.log('getRes函数执行了');