用来缓存计算结果，依赖发生改变时，重新进行计算，类似于vue中的computed

import React, { useState, useMemo } from 'react';
import {Input, InputNumber, List} from "antd";

// 1-1000
const defaultNumbers = Array.from({length:1000}).map((_,index) => index +1);
function Index() {
  const [selectedNum, setSelectedNum] = useState<number>(1);
  const [keywords, setKeywords] = useState<string>('');

  const getNumberList = (value: number) => {
    console.log('大量计算中...')
    return defaultNumbers.filter(num => num % value === 0);
  }

  // 启用useMemo
  const numberList = useMemo(() => {
    return getNumberList(selectedNum)
  }, [selectedNum]);

  // 禁用useMemo
  // const numberList = getNumberList(selectedNum)

  return (
      <div>
        <InputNumber
            min={1}
            max={1000}
            style={{width:300}}
            placeholder="请输入要查询的数字"
            onChange={(value) => setSelectedNum(Number(value))}
        />
        <Input placeholder="请输入关键词" onChange={(e) => setKeywords(e.target.value)} style={{ width: 200 }} />
        当前查询关键词为：{keywords}
        <List
            size="small"
            header={<div>查询结果如下：</div>}
            footer={<div>共{numberList.length}条数据，符合查询条件</div>}
            bordered
            dataSource={numberList}
            renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      </div>
  );
}
export default Index

与useCallback对比

• useMemo 返回缓存的 变量
• useCallback 返回缓存的 函数。

注意

1. useMemo不是越多越好，缓存也要成本
2. 没有依赖项时，useMemo每次渲染时都会执行
3. 触发时机对比
   • useEffect：DOM改变之后触发
   • useMemo：DOM渲染之前触发

应用场景

主要用来优化高开销的计算属性（如：动态筛选一个大量数据的列表）