当前位置: 首页> 文旅> 艺术 > React 中的 useMemo 和 useCallback

React 中的 useMemo 和 useCallback

时间:2025/7/11 22:38:58来源:https://blog.csdn.net/weixin_40629244/article/details/140968960 浏览次数: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 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

5. useMemo和useCallback的区别

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

关键字:React 中的 useMemo 和 useCallback

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: