useMemo

useMemo 是一个 React Hook,它在每次重新渲染的时候能够缓存计算的结果。useMemo 不会让首次渲染更快,它只会帮助你跳过不必要的更新工作。你应该仅仅把 useMemo 作为一个性能优化的手段。

const cachedValue = useMemo(calculateValue, dependencies)

参数

  • calculateValue:要缓存计算值的函数。它应该是一个没有任何参数的纯函数,并且可以return任意类型。React 将会在首次渲染时调用该函数;在之后的渲染中,如果 dependencies 没有发生变化,React 将直接返回相同值。否则,将会再次调用 calculateValue 并返回最新结果,然后缓存该结果以便下次重复使用。
  • 可选dependencies:是一个数组[dep1, dep2, dep3],React 将使用 Object.is 来比较每个依赖项和它先前的值。需要注意的是dependencies的长度和顺序不能改变。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值