乐趣区

关于程序员:Day8浅谈useMemo

jiezi

指标: 继续输入！每日分享对于 web 前端常见常识、面试题、性能优化、新技术等方面的内容。

Day8- 今日话题

useMemo 是 React 中一个无力的性能优化 Hook。可从 用法 、 工作原理 、 作用 、 优缺点 、 应用场景 、 应用留神点 进行学习、温习。

拿 vue 作比拟的话，性能能够类比成 vue 的计算属性computed，都是因为依赖项发生变化而进行从新计算。

1. 用法

useMemo 是 React 中的一个 Hook，用于缓存计算结果，以缩小不必要的计算和渲染。它承受两个参数：

  • 一个函数，用于计算须要缓存的值。
  • 一个依赖数组，蕴含了在数组中列出的变量发生变化时才从新计算值，能够为空数组或蕴含多个依赖。
const memoizedValue = useMemo(() => computeExpensiveValue(dep1, dep2), [dep1, dep2]);

2. 工作原理

useMemo 的工作原理波及到 React 的渲染过程和依赖数组的比拟，上面具体介绍其工作原理：

  1. 组件的初始渲染和依赖项变动时：

    • 当一个组件首次渲染时或其依赖项发生变化时，React 会执行组件函数内的所有代码，包含 useMemo。
    • 在 useMemo 中，第一个参数是一个计算函数。React 调用这个函数，计算并返回一个值，同时将这个值存储在外部。
    • React 还会将依赖数组（useMemo 的第二个参数）的内容记录下来。

  2. 比拟依赖项：

    • 当组件从新渲染时，React 会再次执行组件函数，包含 useMemo。
    • 在这个阶段，React 会比拟以后的依赖数组和上一次渲染时存储的依赖数组。

  3. 从新计算或复用：

    • 如果以后的依赖数组和上一次的依赖数组完全相同（即每个元素都严格相等），React 会认为依赖项没有变动，不会从新计算 useMemo 的后果。
    • 如果以后的依赖数组和上一次的依赖数组不相等，React 将从新调用 useMemo 中的计算函数，计算并返回新的值。
    • 如果依赖数组为空（[]），则 useMemo 的后果只会在组件首次渲染时计算一次，并且永远不会从新计算。

  4. 返回计算结果：

    • 无论是从新计算还是复用，useMemo 的最终后果都将返回给组件，能够在组件中应用。

这个工作原理确保了 useMemo 只在其依赖项发生变化时才会从新计算，从而无效地防止了不必要的计算和渲染。这对于优化性能和确保组件的一致性十分重要。

须要留神的是，useMemo 返回的是缓存的值，而不是一个函数。如果须要缓存一个函数，能够应用 useCallback。此外，useMemo 的依赖数组应该蕴含所有在计算函数中应用的变量，以确保在依赖项变动时从新计算。

3. 作用

  • 性能优化：useMemo 能够用于缓存低廉的计算，防止不必要的从新计算，从而进步性能。
  • 防止不必要的渲染：通过将 useMemo 的后果用作子组件的 prop，能够防止子组件在不必要的状况下从新渲染。
  • 缓存援用类型：能够缓存援用类型（如对象或数组），以防止在每次渲染时都创立新的援用。

4. 长处

  • 性能优化：最显著的长处是帮忙优化性能，防止不必要的计算和渲染。
  • 可读性：通过明确指定依赖，代码变得更加可读和可保护。

5. 毛病

  • 滥用可能导致性能问题：适度应用 useMemo 可能会导致性能问题，因为它可能导致不必要的内存占用。应该审慎抉择应用它，只在须要缓存计算结果时才应用。
  • 复杂性减少：如果依赖数组蕴含多个变量，保护这些依赖可能会减少代码复杂性。

6. 应用场景

  • 计算结果低廉：用于缓存计算成本昂扬的值，例如数学计算、数据筛选、数据转换等。
  • 防止不必要的渲染：将 useMemo 的后果用作子组件的 prop，以确保子组件只在必要时从新渲染。
  • 缓存援用类型：当须要在屡次渲染之间放弃雷同的援用类型时，能够应用 useMemo。

艰深来讲就是说，以后组件或者以后组件所在的父组件批改状态（state）时，咱们不想让其 render 函数中的某个节点或者本身因为不相干的状态变动而去从新渲染造成性能上的节约，能够应用 useMemo 来解决这个问题。

7. 应用留神点

应用 useMemo 时须要留神以下几个重要的方面：

  1. 性能优化的均衡：不要滥用 useMemo。只有在有低廉的计算或大型援用类型传递给子组件时，才思考应用它。适度应用 useMemo 可能会导致不必要的复杂性和性能问题。
  2. 正确抉择依赖项：确保依赖数组蕴含了所有在计算函数中应用的变量。如果遗记蕴含某个依赖，可能导致缓存的值不会在依赖变动时从新计算。
  3. 依赖项是否须要深层比拟：留神依赖项是否是援用类型（如对象或数组）。如果依赖项是援用类型，它们的内容可能在地址不变的状况下发生变化。在这种状况下，你可能须要自行处理深层比拟，以确保正确触发从新计算。
  4. 防止不必要的内存占用：尽管 useMemo 能够用于缓存援用类型，但要小心不要在不须要的状况下缓存大型对象或数组，以防止不必要的内存占用。在某些状况下，间接传递援用类型的变动可能更适合。
  5. 记住 useMemo 返回的是值：useMemo 返回的是计算的值，而不是函数。如果须要缓存函数，应该应用 useCallback。
  6. 性能监控工具：使用性能监控工具（如 React DevTools）来查看 useMemo 缓存的值是否按预期工作。这有助于排除性能问题和调试问题。
  7. 组件层次结构思考：useMemo 只在以后组件内无效。如果须要在多个组件之间共享缓存值，可能须要晋升状态或应用上下文（Context）。

欢送点赞、关注、转发～

本文由 mdnice 多平台公布

退出移动版