React-Hooks----useMemo()

前言

useMemo() 是 React 中的一个 hook，用于缓存计算结果以提高性能。

用法

接收两个参数：一个函数和一个依赖数组。

当依赖数组中的值发生变化时，useMemo() 函数会重新计算并返回新的值；当依赖数组中的值未发生变化时，useMemo() 函数会直接返回缓存的值，不会重新计算。

用法示例：

import React, { useMemo } from 'react';

function MyComponent(props) {
  const { a, b } = props;

  // 计算 a + b 的值，并将结果缓存
  const sum = useMemo(() => {
    console.log('计算 sum');
    return a + b;
  }, [a, b]);

  return (
    <div>
      <p>{a} + {b} = {sum}</p>
    </div>
  );
}

在这个例子中，useMemo() 缓存了计算 a + b 的结果，只有在 a 或 b 改变时才会重新计算。这样可以减少不必要的计算，提高组件性能。