当前位置：首页 > news >正文

React 中的 useMemo 和 useCallback

news 2025/7/7 18:53:34

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 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 (<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