欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React useMemo與useCallabck有什么區(qū)別

 更新時(shí)間:2022年12月20日 11:59:20   作者:地鐵程序員  
useCallback和useMemo是一樣的東西,只是入?yún)⒂兴煌瑄seCallback緩存的是回調(diào)函數(shù),如果依賴項(xiàng)沒有更新,就會(huì)使用緩存的回調(diào)函數(shù);useMemo緩存的是回調(diào)函數(shù)的return,如果依賴項(xiàng)沒有更新,就會(huì)使用緩存的return

看官方的文檔介紹這兩個(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環(huán)境安裝流程

    react native環(huán)境安裝流程

    React Native 是目前流行的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架之一。本文介紹react native環(huán)境安裝流程及遇到問題解決方法,感興趣的朋友一起看看吧
    2021-05-05
  • React?Native?加載H5頁面的實(shí)現(xiàn)方法

    React?Native?加載H5頁面的實(shí)現(xiàn)方法

    這篇文章主要介紹了React?Native?加載H5頁面的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-04-04
  • React?Router?v6路由懶加載的2種方式小結(jié)

    React?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-04
  • react實(shí)現(xiàn)可播放的進(jìn)度條

    react實(shí)現(xiàn)可播放的進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)可播放的進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • React實(shí)現(xiàn)Step組件的示例代碼

    React實(shí)現(xiàn)Step組件的示例代碼

    這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)Step組件(步驟條組件)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情

    React函數(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

    這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • React?Hooks的useState、useRef使用小結(jié)

    React?Hooks的useState、useRef使用小結(jié)

    React Hooks 是 React 16.8 版本引入的新特性,useState和useRef是兩個(gè)常用的Hooks,本文主要介紹了React?Hooks的useState、useRef使用,感興趣的可以了解一下
    2024-01-01
  • react中useEffect函數(shù)的詳細(xì)用法(最新推薦)

    react中useEffect函數(shù)的詳細(xì)用法(最新推薦)

    useEffect是React中的一個(gè)Hook,用于在函數(shù)組件中處理副作用(如數(shù)據(jù)獲取、訂閱、手動(dòng)更改 DOM 等),useEffect屬于組件的生命周期方法,下面通過本文給大家分享react中useEffect函數(shù)的詳細(xì)用法,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • Next.js搭建Monorepo組件庫(kù)文檔實(shí)現(xiàn)詳解

    Next.js搭建Monorepo組件庫(kù)文檔實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫(kù)文檔,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11

最新評(píng)論