React.memo与useMemo的区别

总结:React.memo() 和 useMemo() 的主要区别
从上面的例子中,可以看到 React.memo() 和 useMemo() 之间的主要区别:

React.memo() 是一个高阶组件,可以使用它来包装不想重新渲染的组件,除非其中的 props 发生变化
useMemo() 是一个 React Hook,可以使用它在组件中包装函数。 可以使用它来确保该函数中的值仅在其依赖项之一发生变化时才重新计算
虽然 memoization 似乎是一个可以随处使用的巧妙小技巧,但只有在绝对需要这些性能提升时才应该使用它。 Memoization 会占用运行它的机器上的内存空间,因此可能会导致意想不到的效果。
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/zz130428/article/details/128608546

事实上我曾经在项目中用useMemo包裹过组件,缓存效果还不错。使用React.memo相比useMemo,就是不用每次使用都加上props的依赖了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当你在使用React时,你可能会经常遇到需要优化组件性能的情况。React.memouseMemo都是React提供的两种优化性能的方式。 React.memo是一个高阶组件(Higher Order Component),它可以优化组件的性能,使得组件只有在它的props发生改变时才会重新渲染。这种优化是通过比较前一次和当前props的浅层比较来实现的。使用React.memo时,需要将组件作为React.memo函数的参数传递,例如: ``` import React from 'react'; const MyComponent = React.memo(props => { // 组件代码 }); export default MyComponent; ``` useMemo是一个React的hook函数,它可以缓存组件中的一些计算结果,以避免重复计算。useMemo接收两个参数:一个计算函数和一个依赖数组。当依赖数组中的任何一个值发生改变时,useMemo会重新计算并返回新的值。如果依赖数组中的任何一个值都没有发生改变,则会返回上一次缓存的值。使用useMemo时,需要将计算函数作为useMemo的第一个参数传递,依赖数组作为第二个参数传递,例如: ``` import React, { useMemo } from 'react'; const MyComponent = props => { const expensiveCalculation = useMemo(() => { // 计算代码 }, [props.dependency]); // 组件代码 }; export default MyComponent; ``` 需要注意的是,React.memouseMemo都只是对组件性能进行优化的工具,并不是适用于所有情况的万能解决方案。在使用它们时,需要谨慎考虑依赖项和是否真的需要进行性能优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值