useMemo的主要作用就是缓存值的，某些时候，组件中某些值需要根据状态进行一个二次计算（类似于 Vue 中的计算属性），由于函数组件一旦重新渲染，就会重新执行整个函数，这就导致之前的二次计算也会重新执行一次

import { useMemo, useState } from 'react'export default function UseMemoOptimize() {// 维护两个状态const [counter, setCounter] = useState(1);const [val, setVal] = useState("");/*** 每次改变其它值的时候，都会重新调用该函数*/function getCount() {console.log("getCount函数调用了")return counter + 100;}return (<div><h1>总数:{getCount()}</h1><button onClick={() => setCounter(counter + 1)}>+1</button><input value={val} type="text" onChange={e=>setVal(e.target.value)} /></div>);
}

useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如：需要进行二次计算的状态

import { useMemo, useState } from 'react'
export default function UseMemoOptimize() {// 维护两个状态const [counter, setCounter] = useState(1);const [val, setVal] = useState("");/*** 在之前的状态的基础上做一个二次计算* @returns 返回一个缓存值*/const countNum = useMemo(function getCount() {console.log("getCount函数调用了")return counter + 100;},[counter])return (<div><h1>总数:{ countNum }</h1><button onClick={() => setCounter(counter + 1)}>+1</button><input value={val} type="text" onChange={e=>setVal(e.target.value)} /></div>);
}