useMemo可以用来做计算属性吗？

前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：react.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

useMemo

useMemo可以用来创建计算属性，并且在某些情况下可以有效地提高性能。

示例

const computedValue = useMemo(() => {
  // 计算逻辑
  return result;
}, [dependency1, dependency2]);

上述代码中，useMemo接收一个工厂函数作为第一个参数，在这个函数中可以定义计算逻辑并返回计算结果。第二个参数是一个依赖数组，其中包含所有影响计算的输入依赖项。当依赖项发生变化时，useMemo会重新执行工厂函数并返回新的计算结果，否则会直接返回上次缓存的结果。

useMemo返回的参数的特点

useMemo返回的参数具有记忆性。
当依赖项发生变化时，useMemo会重新执行工厂函数，并返回新的计算结果。但如果依赖项没有发生变化，useMemo会直接返回上次缓存的结果，而不会重新执行工厂函数。

这种记忆性使得useMemo在某些场景下非常有用，可以避免重复计算相同的结果，提高性能。

示例

const fullName = useMemo(() => {
  console.log('Calculating fullName');
  return `${firstName} ${lastName}`;
}, [firstName, lastName]);

• 如果firstName或lastName发生变化，useMemo会重新执行工厂函数并计算新的fullName。
• 如果firstName和lastName都保持不变，useMemo会直接返回上次计算得到的fullName，而不会重新计算。

这样，当组件重新渲染时，如果输入值没有变化，就可以避免重复计算fullName，从而提高性能。

需要注意的是，useMemo的记忆性只适用于当前组件实例内部。如果组件被卸载后再重新渲染，上次缓存的结果将会丢失，useMemo会再次执行工厂函数来计算新的结果。

优点

• 提高性能：通过使用useMemo创建计算属性，可以避免在每次渲染时都重新计算值。只有在依赖项发生变化时，才会触发计算逻辑，从而减少不必要的计算开销，提高性能。
• 避免重复计算：如果某个计算属性的依赖项没有发生变化，useMemo会直接返回上次缓存的结果，避免重复计算。这对于计算开销较大的场景非常有用。

缺陷

• 过度使用可能导致性能问题：当依赖项变化时，useMemo会重新执行工厂函数并计算新的值。如果在一个组件中使用了大量的useMemo，且依赖项变化频繁，可能会导致过多的计算和渲染开销，降低性能。
• 增加代码复杂性：使用useMemo创建计算属性需要额外编写计算逻辑，并且需要管理好依赖项的变化。这可能会增加代码的复杂性和维护成本。

总结

在使用useMemo创建计算属性时，需要权衡性能提升和代码复杂性之间的平衡。对于计算开销较大的情况，或者依赖项变化频繁的情况，使用useMemo可以有效地优化性能。但在简单的计算场景下，可能会增加代码的复杂性而带来不必要的开销。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力