useMemo

最新推荐文章于 2023-12-20 16:52:32 发布
最新推荐文章于 2023-12-20 16:52:32 发布
阅读量641 收藏
点赞数 1
分类专栏： react 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56542349/article/details/128704776
版权

1. useMemo的作用

useMemo相当于vue的计算属性，只有当它所依赖的值发生变化的时候，useMemo才会重新返回一个新的值。

2. useMemo的返回值

如果用useMemo返回一个数据的话， 而这个数据里面一些是常量，一些是变量的话，只有对应的变量会发生变化，而其它的常量是不会变化的，所以如果要对useMemo的返回值进行一些splice操作的话，是无法起作用的。

因为其自己本身已经定义好的数据结构是没办法改变的，改变的只是里面的变量

呐呐呐呐。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-useMemo
05-22
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
react-memo-example:这是一个演示使用React.memo（）与useMemo的示例
05-26
React备忘录示例演示React.memo()和useMemo()之间区别的示例建于NextJS入门要开始使用，请按照以下说明进行操作克隆此仓库通过运行yarn install依赖项通过运行yarn run dev运行应用程序前往localhost:3000查看示例...
useMemo的使用
我的博客
10-17 2795
useMemo 的使用方法 useMemo的作用 useMemo 类似于Vue的计算属性，监听某个值的变化，根据变化的值重新计算新值； useMemo会缓存结果，如果监听的值没有发生变化，即使组件重新渲染，也不会重新发生计算，这个行为有助于避免在每个渲染上进行昂贵的计算 useMemo 的使用方法 import React, {useMemo, useState} from "react"; function Memo (){ const [count, setCount] = useSt
useMemo的使用简述
lijiamingyyds的博客
04-27 6333
一 useMemo的介绍 控制组件更新条件，可根据状态变化控制方法执行,优化传值，避免不必要的方法调用 useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化 接下来我们看看他到底是如何使用的 第一步创建一个函数父组件 初始化name和content并且在父组件中使用子组件Button 二子组件 我们可以发现这种写法无论父组件点击哪个按钮 都会执行onchangename方法，这样当我们只想改变其中一个的时候就会造成多
useCallback()和useMemo()的作用
hjhfreshman的博客
07-07 385
React.memo() React.useCallback() React.useMemo() React.memo() 问题 React 中当组件的 props 或 state 变化时，会重新渲染视图，实际开发会遇到不必要的渲染场景。看个例子： 子组件： function ChildComp () { console.log('render child-comp ...') return <div>Child Comp ...</div> } 父组件： function
基于vue的记事本应用 vuememo - 更新
weixin_34392906的博客
02-28 150
新版本更新支持 Markdown 形式的笔记，支持导出 .png 格式的笔记图片，复制内容到剪贴板方便分享，支持将所有笔记数据导出为 JSON 格式的文件等。
reactmemoization：useCallback和useMemo演练
02-11
Create React App入门该项目是通过。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。...
react-memoization-hooks-2021-02-16:使用React Memo类，useCallback和useMemo控制性能的基本代码存储库
05-09
使用React Memo，useCallback和useMemo控制性能在本课程中，我们将创建一个使用GitHub API数据的应用程序，并通过它可以浏览各种改进和性能分析的概念，我们将学习如何在我们的应用程序中使用诸如useMemo和...
practice-react-optimization:使用钩子的Profiler扩展在React应用中的优化实践（useMemo，useCallback）
03-22
本实践项目聚焦于`useMemo`和`useCallback`这两个重要的优化钩子，它们能帮助我们减少不必要的重渲染，提升组件性能。以下是对这两个钩子的详细解释以及如何在实际应用中使用它们进行优化。 **useMemo** `useMemo`...
useMemo useEffect
王可夫的博客
09-08 618
react
React高手都会用的useMemo有什么用的？
最新发布
xuxian的博客
12-20 586
在 React 中，性能优化一直是开发者们关注的焦点之一。为了减少组件的重渲染和提高应用程序的性能，React 提供了一些钩子函数，其中之一就是 useMemo。本文将深入探讨 useMemo 的用法，展示它如何帮助我们优化 React组件。
React的memo和useMemo的作用
包磊磊的博客
04-27 933
要想学习useMemo必须要先知道React.memo 这两者都有一定的优化作用 memo的作用 当数据变化时，代码会重新执行一遍，但是子组件数据没有变化也会执行，这个时候可以使用memo将子组件封装起来，让子组件的数据只在发生改变时才会执行 案例 点击按钮改变n的值，m不变，验证程序会不会执行m的代码 不使用memo的情况 只改变n的值时，虽然说m的值没变，但是也执行了Child的打印语句 function App(){ const [n,setN] = useState(0);
useCallback 作用，useMemo ，memo作用 浅显理解
Embrace924的博客
06-22 485
项目中看到别人代码基本上每个函数都写了useCallback 于是去查了查到底有什么作用 快看睡着了还是没太明白，直接同事请教了一下 qian xia ni
useMemo,memo,useRef等相关hooks详解
weixin_44441196的博客
05-27 437
useMemo 主要是用来做数据计算，并带有缓存不会重复计算，相当于vue的computed import React,{ useRef, useState, useEffect, useMemo, memo } from 'react' export default function text() { const [height, setHeight] = useState(66) const memoizedCallback = useMemo( () => { retu
前端学习（3306）：函数组件usermemo和usercallback二
歌谣的博客
09-07 143
说说你对useMemo 的理解？
路人贾！
01-08 167
说说你对useMemo 的理解？
前端学习（3305）：函数组件usermemo和usercallback
歌谣的博客
09-07 260
前端学习（3307）：函数组件usermemo和usercallback三
歌谣的博客
09-07 213
react useMemo
07-28
React的useMemo是一种优化代码的手段，可以帮助我们使用缓存的值或函数来减少重复计算或渲染，从而优化性能。它在React.memo中特别有用，因为当props中的引用值失效时，可以帮助我们使用缓存值（同一个引用），从而在浅比较时不会重新渲染。\[1\] 在使用上，useMemo接受两个参数。第一个参数是一个函数，第二个参数是依赖项数组。只有当依赖项的值发生改变时，才会多次执行函数。否则，函数只会执行一次。如果依赖项数组为空(\[\])，则函数只会执行一次。\[2\] 举个例子，假设我们有一个函数式组件UseMemoTest，其中包含一个输入框和一个列表。我们可以使用useMemo来缓存根据输入框的值过滤后的列表数据。只有当输入框的值发生改变时，才会重新计算过滤后的列表数据。这样可以避免不必要的重复计算和渲染。\[2\] 另外，React.memo是一个高阶组件，当它作用于函数式组件并作为子组件时，每次父组件更新后，会浅对比传入的props是否发生变化。如果props没有变化，子组件就不会更新。这个时候，可以使用useMemo来返回一个函数，以确保子组件不会重新渲染。\[3\] 总结来说，React的useMemo可以帮助我们优化代码性能，通过使用缓存的值或函数来减少重复计算或渲染。它在React.memo中特别有用，可以帮助我们避免不必要的重新渲染。 #### 引用[.reference_title] - *1* *3* [六分钟带你学会 react 中的 useMemo](https://blog.csdn.net/longxiaobao123/article/details/128547472)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [React中useMemo的简单使用](https://blog.csdn.net/u010234868/article/details/126956021)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呐呐呐呐。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值