了解 useMemo

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《了解 useMemo》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

每次状态或属性发生变化时，react 都会重新渲染组件，这对于保持最新状态非常有用。但是，如果您在每次渲染时都进行大量计算，它也可能会导致性能问题。这就是 usememo 的用武之地！

usememo 是一个缓存函数结果的钩子，因此除非其依赖项发生变化，否则不必再次运行

工作原理：

const memoizedvalue = usememo(() => computeexpensivevalue(a, b), [a, b]);

usememo 有两个参数：一个函数和一个依赖项数组；
仅当其中一个依赖项发生更改时，它才会重新运行该函数

什么时候应该使用它？

• 昂贵的计算：如果计算速度很慢，请将它们包装在 usememo 中，这样它们就不会在每个渲染上运行
• 防止不必要的重新渲染：将对象或数组作为 props 传递时，使用 usememo 避免在每次渲染时重新创建它们，这可能会触发子组件不必要的重新渲染

示例：
没有 usememo:

const result = computeexpensivevalue(a, b); // runs on every render

使用 usememo：

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]); // Runs only when `a` or `b` change

何时不使用它：

不要过度使用它！如果您的计算是轻量级的，那么添加 usememo 并不会真正有帮助，甚至可能会减慢速度。当你有明显的性能问题时使用它

简而言之：
保持简单，在实际看到性能问题之前不要进行优化:)

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。