React-useMemo 分析

概要

作用：在组件的顶层调用useMemo 来缓存每次重新渲染都需要及计算的结果

用法： useMemo(calculateValue, dependencies)

实例：

import useMemo from 'react';

 const renderNodes = useMemo(() => {
    return nodes.map((item: any, index: number) => {
      return (
        <div className={styles['list-new']} key={index}>
          {item && item.finish != 2 && < $chatItem {...item} />}
          {item && item.finish == 2 && < $tips {...item} />}
        </div>
      );
    });
  }, [newIdx, showDot, nodes]);

需要给 useMemo 传递两样东西

• 一个没有任何参数的 calculation 函数，像这样 () =>，并且返回任何你想要的计算结果。
• 一个由包含在你的组件中并在 calculation 中使用的所有值组成的 依赖列表。

在初次渲染时，你从 useMemo 得到的 值 将会是你的 calculation 函数执行的结果。

在随后的每一次渲染中，React 将会比较前后两次渲染中的 所有依赖项 是否相同。如果通过 Object.is 比较所有依赖项都没有发生变化，那么 useMemo 将会返回之前已经计算过的那个值。否则，React 将会重新执行 calculation 函数并且返回一个新的值。

换言之，useMemo 在多次重新渲染中缓存了 calculation 函数计算的结果直到依赖项的值发生变化。

如果计算速度很快，这将不会产生问题。但是，当正在过滤转换一个大型数组，或者进行一些昂贵的计算，而数据没有改变，那么可能希望跳过这些重复计算。如果 todos 与 tab 都与上次渲染时相同，那么像之前那样将计算函数包装在 useMemo 中，便可以重用已经计算过的 visibleTodos。

这种缓存行为叫做 记忆化。

注意

你应该仅仅把 useMemo 作为性能优化的手段。如果没有它，你的代码就不能正常工作，那么请先找到潜在的问题并修复它。然后再添加 useMemo 以提高性能。