阅读量:0
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 ( <div> <p>Count:{count}</p> <button onClick={hindleClick}>按钮</button> <p>Total1:{total1()}</p> <p>Total2:{total2}</p> </div> ) } export default App3. 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 ( <div> <p>Count:{count}</p> <button onClick={hindleClick}>按钮</button> <Child onClick={handleChildClick}></Child> </div> ) } // 检测传入的方法是否发生变化 const Child = memo(({onClick}:any)=>{ console.log('child......') return <div>我是子节点<button onClick={onClick}></button></div> }) export default App 5. useMemo和useCallback的区别
他们都用于缓存，useCallback 主要用于缓存函数，返回一个缓存后的函数，而 useMemo 主要用于缓存值，返回一个缓存后的值。
