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 改变时才会重新计算。这样可以减少不必要的计算，提高组件性能。