1. useMemo语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), deps);

1. 传入一个函数进去，会返回一个 memoized 值，需要注意的是，函数内必须有返回值；

2. 第二个参数会依赖值，当依赖值更新时，会从新计算；

2. useMemo优化示例

我们定义了一个total1函数，内部对一个数组进行求和，通过 reduce 计算总和，经过测试发现点击按钮后，只会执行 total1 ，不会执行 total2，假设total2计算量巨大，就会造成内存的浪费，通过 useMemo 可以帮我们缓存计算值。

import {useMemo, useState } from "react"  function App() {     const [count,setCount] = useState(0);     //  正常的计算方法     const total1 = ()=>{         // 页面渲染时会重新输出         console.log('total1......');         const list = [1,3,5,7,9];         // 数组求和         return list.reduce((prev,current)=>prev+current,0)     };      // 加了缓存的计算     const total2 = useMemo(()=>{         // 页面重新渲不会再次输出         console.log('total2......');         const list = [1,3,5,7,9];         // 数组求和         return list.reduce((prev,current)=>prev+current,0)      },[]);      // 点击按钮测试输出     const hindleClick = ()=>{         setCount(count+1);     }; 	return ( 		
             
Count:{count}
             按钮             
Total1:{total1()}
             
Total2:{total2}
         
 	) }   export default App

3. useCallback语法

useCallback(callback, deps)

1. useCallback 接收 2 个参数，第一个为缓存的函数，第二个为依赖值；

2. 主要用于缓存函数，第二次会返回同样的结果；

4. useCallback优化示例

定义一个子组件在父组件中调用，当父组件更新重新渲染时，子组件也会重新渲染。然后我们对子组件加了memo对传入的参数进行检测，同时对传入子组件的方法使用useCallback进行缓存，这样当父组件在更新时，缓存的方法没有发生变化，子组件通过memo发现传入的方法没有发生改变，也就不会重新渲染，以此提高了性能。

import {memo,useCallback,useState } from "react" function App() {     const [count,setCount] = useState(0);     // 父组件点击更新     const hindleClick = ()=>{         setCount(count+1);     };     // 缓存点击方法     const handleChildClick = useCallback(()=>{         console.log("子节点点击了")     },[]);     return (         
             
Count:{count}
             按钮                      
     ) }  // 检测传入的方法是否发生变化 const Child = memo(({onClick}:any)=>{     console.log('child......')     return 
我是子节点
 })  export default App 

5. useMemo和useCallback的区别

他们都用于缓存，useCallback 主要用于缓存函数，返回一个缓存后的函数，而 useMemo 主要用于缓存值，返回一个缓存后的值。