useMemo 为什么,何时以及如何

        为什么何时如何是我们每次在技术旅程中遇到新事物时都应该尝试回答的问题。

        在我们继续之前,让我们讨论一下 useMemo 是什么。
        useMemo 用于从我们这边提供的函数中返回记忆值。

计算记忆化memoisation优化主要用于加速技术的计算机程序通过存储昂贵的结果函数调用,并且当相同的输入再次发生返回高速缓存的结果。(维基百科来源)。

        正如我们从前面的定义中看到的那样,useMemo 用于提高我们的性能。我们涵盖了标题中的“为什么”问题。

        我弹出的下一个问题是:我们什么时候应该使用 useMemo?
        useMemo 应该在两种情况下使用:

  • 记住昂贵计算的结果
  • 跳过昂贵的子组件重新渲染

        如何是我们文章的最大部分,我们将通过示例来完成。示例不会是昂贵的计算,但它将用作可执行示例。

useMemo 代码片段

        输入字段由handleChange函数处理。字段中
        插入值的最后一位Input设置为状态。
        状态值(数字)用于“昂贵的计算”。
        在进行“昂贵的计算”后,结果被记忆并呈现组件。
        在下一次迭代中,我们在输入字段中输入一个数字,如果该数字与前一次相同,则不会进行“昂贵的计算”,而是将返回记忆值。
        就是这样,如果传递给记忆化函数的值与前一个相同,则返回记忆化值。依赖数组是我们放置计算所依赖的值的地方。在上面的代码片段中,number只是一个依赖值。

        memoization 的另一个用例用于我们希望在父组件发生变化时防止不必要的子组件渲染的情况。

useMemo 代码片段

        当父组件改变状态时,默认行为会导致所有子组件重新渲染。可以通过记忆子组件来防止这种行为。
        在我们关于每次击键Parent component更改状态的代码片段中,这会导致ChildComponent重新渲染,但MemoizedChildComponent返回缓存值而不进行重新渲染。
        通过这种方式,我们可以避免发生昂贵的重新渲染并提供缓存值。

        结论:
        我们使用 useMemo 通过使用缓存值来提高我们的性能。在输入值与之前渲染中的值相同的情况下使用缓存值。用上面的例子弄脏手,如果有不清楚的地方写评论。七爪网
源码交易平台_成品网站源码_小程序源码-七爪网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值