为什么、何时和如何是我们每次在技术旅程中遇到新事物时都应该尝试回答的问题。
在我们继续之前,让我们讨论一下 useMemo 是什么。
useMemo 用于从我们这边提供的函数中返回记忆值。
在计算,记忆化或memoisation是优化主要用于加速技术的计算机程序通过存储昂贵的结果函数调用,并且当相同的输入再次发生返回高速缓存的结果。(维基百科来源)。
正如我们从前面的定义中看到的那样,useMemo 用于提高我们的性能。我们涵盖了标题中的“为什么”问题。
我弹出的下一个问题是:我们什么时候应该使用 useMemo?
useMemo 应该在两种情况下使用:
- 记住昂贵计算的结果
- 跳过昂贵的子组件重新渲染
如何是我们文章的最大部分,我们将通过示例来完成。示例不会是昂贵的计算,但它将用作可执行示例。
输入字段由handleChange
函数处理。字段中
插入值的最后一位Input
设置为状态。
状态值(数字)用于“昂贵的计算”。
在进行“昂贵的计算”后,结果被记忆并呈现组件。
在下一次迭代中,我们在输入字段中输入一个数字,如果该数字与前一次相同,则不会进行“昂贵的计算”,而是将返回记忆值。
就是这样,如果传递给记忆化函数的值与前一个相同,则返回记忆化值。依赖数组是我们放置计算所依赖的值的地方。在上面的代码片段中,number
只是一个依赖值。
memoization 的另一个用例用于我们希望在父组件发生变化时防止不必要的子组件渲染的情况。
当父组件改变状态时,默认行为会导致所有子组件重新渲染。可以通过记忆子组件来防止这种行为。
在我们关于每次击键Parent component
更改状态的代码片段中,这会导致ChildComponent
重新渲染,但MemoizedChildComponent
返回缓存值而不进行重新渲染。
通过这种方式,我们可以避免发生昂贵的重新渲染并提供缓存值。
结论:
我们使用 useMemo 通过使用缓存值来提高我们的性能。在输入值与之前渲染中的值相同的情况下使用缓存值。用上面的例子弄脏手,如果有不清楚的地方写评论。七爪网源码交易平台_成品网站源码_小程序源码-七爪网