React useMemo與useCallabck有什么區(qū)別
看官方的文檔介紹這兩個(gè)api的概念
useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
返回一個(gè) memoized 值。
1、把“創(chuàng)建”函數(shù)和依賴項(xiàng)數(shù)組作為參數(shù)傳入 useMemo,它僅會(huì)在某個(gè)依賴項(xiàng)改變時(shí)才重新計(jì)算 memoized 值。這種優(yōu)化有助于避免在每次渲染時(shí)都進(jìn)行高開銷的計(jì)算。
2、如果沒有提供依賴項(xiàng)數(shù)組,useMemo 在每次渲染時(shí)都會(huì)計(jì)算新的值。
useCallback
const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], );
返回一個(gè) memoized 回調(diào)函數(shù)。
把內(nèi)聯(lián)回調(diào)函數(shù)及依賴項(xiàng)數(shù)組作為參數(shù)傳入 useCallback,它將返回該回調(diào)函數(shù)的 memoized 版本,該回調(diào)函數(shù)僅在某個(gè)依賴項(xiàng)改變時(shí)才會(huì)更新。當(dāng)你把回調(diào)函數(shù)傳遞給經(jīng)過優(yōu)化的并使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate)的子組件時(shí),它將非常有用。
useCallback(fn, deps) 相當(dāng)于 useMemo(() => fn, deps)
看TS類型
/** * `useMemo` will only recompute the memoized value when one of the `deps` has changed. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usememo */ // allow undefined, but don't make it optional as that is very likely a mistake function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; /** * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs` * has changed. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usecallback */ // A specific function type would not trigger implicit any. // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types. // tslint:disable-next-line ban-types function useCallback<T extends Function>(callback: T, deps: DependencyList): T;
- 泛型 T 在 useCallback 中是一個(gè)鉤子函數(shù)
- 在 useMemo 中是一個(gè)返回值。
總結(jié)
返回的值類型不同
- useMemo 返回的是計(jì)算值
- useCallback 返回的是一個(gè)回調(diào)函數(shù)
來個(gè) demo
import React, { FC, useCallback, useMemo, useState } from 'react'; const Index: FC = (props) => { const [count, setCount] = useState(0); const isEvenNumber = useMemo(() => { return count % 2 === 0; }, [count]); const onClick = useCallback(() => { setCount(count + 1); }, [count]); return ( <div> <div>{count} is {isEvenNumber ? 'even':'odd'} number</div> <button onClick={onClick}></button> </div> ); };
useCallback 和 useMemo 的參數(shù)都是一個(gè)函數(shù)加一個(gè)依賴數(shù)組,依賴沒有改變時(shí)直接返回內(nèi)存中緩存的結(jié)果,無需重復(fù)計(jì)算。簡(jiǎn)單理解就是 useCallback 緩存事件處理函數(shù),useMemo 緩存二次計(jì)算的結(jié)果,如上面的點(diǎn)擊事件,以及通過 count 值判斷奇數(shù)偶數(shù)的二次計(jì)算結(jié)果。
本質(zhì)原因
React 的函數(shù)組件是非常好用的東西,相比 class 寫法以及 Vue 的對(duì)象掛載寫法簡(jiǎn)潔很多,代碼測(cè)試復(fù)用成本低,容易入手,但也帶來一些問題,無狀態(tài)函數(shù)很理想,但現(xiàn)實(shí)有一些計(jì)算開銷大、組件渲染頻繁的場(chǎng)景是需要狀態(tài)的,每次都計(jì)算一遍狀態(tài)(callback 和 二次計(jì)算值)無疑很浪費(fèi)內(nèi)存,函數(shù)不像對(duì)象(React class 寫法或者 Vue 組件寫法)可以直接將狀態(tài)掛載在自身,沒有浪費(fèi)內(nèi)存的問題,要實(shí)現(xiàn)類似的效果只能找一個(gè)的內(nèi)存掛載點(diǎn)掛載這些東東,所以有了 useCallback 和 useMemo 這些 hook。
到此這篇關(guān)于React useMemo與useCallabck有什么區(qū)別的文章就介紹到這了,更多相關(guān)React useCallback useMemo內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?Native?加載H5頁面的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native?加載H5頁面的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04React?Router?v6路由懶加載的2種方式小結(jié)
React?Router?v6?的路由懶加載有2種實(shí)現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來看看它們的具體實(shí)現(xiàn)方法吧2024-04-04react實(shí)現(xiàn)可播放的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)可播放的進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情
這篇文章主要介紹了React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情,每一個(gè)?hook?函數(shù)都有對(duì)應(yīng)的?hook?對(duì)象保存狀態(tài)信息,更多詳細(xì)分析,需要的朋友可以參考一下2022-07-07詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07React?Hooks的useState、useRef使用小結(jié)
React Hooks 是 React 16.8 版本引入的新特性,useState和useRef是兩個(gè)常用的Hooks,本文主要介紹了React?Hooks的useState、useRef使用,感興趣的可以了解一下2024-01-01react中useEffect函數(shù)的詳細(xì)用法(最新推薦)
useEffect是React中的一個(gè)Hook,用于在函數(shù)組件中處理副作用(如數(shù)據(jù)獲取、訂閱、手動(dòng)更改 DOM 等),useEffect屬于組件的生命周期方法,下面通過本文給大家分享react中useEffect函數(shù)的詳細(xì)用法,感興趣的朋友跟隨小編一起看看吧2024-06-06Next.js搭建Monorepo組件庫(kù)文檔實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫(kù)文檔,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11