React中useCallback useMemo到底該怎么用

更新時(shí)間：2023年02月06日 14:55:43 作者：碰磕

在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō)，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒(méi)有更改values/props的函數(shù)/組件。在react中，我們可以通過(guò)memo，useMemo以及useCallback來(lái)防止子組件的rerender

useCallback記憶函數(shù)

前言

使用緣由：

防止因?yàn)榻M件重新渲染,導(dǎo)致方法被重新創(chuàng)建,起到緩存作用

類似監(jiān)聽(tīng)器…監(jiān)聽(tīng)更新然后執(zhí)行操作

介紹

防止因?yàn)榻M件重新渲染,導(dǎo)致方法被重新創(chuàng)建,起到緩存作用

使用

/**
 * useCallback記憶函數(shù)
 */
 import React, { useState, useCallback, useEffect } from 'react';
 const set = new Set();
 export default function Parent() {
   const [count, setCount] = useState(1);
   const callback = useCallback(() => {
     console.log(count);
     return count
   }, [count]); //count更新時(shí)執(zhí)行
   return (
   <div>
     <h4>parent count:{count}</h4>
     <div>
       <button onClick={() => setCount(count + 1)}>+</button>
     </div>
     <Child callback={callback} />
   </div>
   )
 }
 const Child = ({callback}) =>{
   const [count,setCount] = useState(0);
   useEffect(()=>{
     setCount(callback())
   },[callback]) //當(dāng)callback更新時(shí)執(zhí)行callback函數(shù)，得到parent組件最新的count
   return <child>
     count:{count}
   </child>
 }

useMemo記憶組件

兩者區(qū)別

與useCallback的區(qū)別

useCallback不會(huì)執(zhí)行第一個(gè)參數(shù)函數(shù),而是將它返回給你，而useMemo會(huì)執(zhí)行第一個(gè)函數(shù)并且將函數(shù)執(zhí)行結(jié)果返回給你
類似監(jiān)聽(tīng)器…監(jiān)聽(tīng)更新然后執(zhí)行操作

使用

/**
 * useMemo記憶組件
 */
 import React, { useState, useMemo } from 'react';
 export default function Memos() {
   const [count, setCount] = useState(1);
   const memo = useMemo(() => {
     console.log("count更新了"+count);
     return count
   }, [count]); //count更新時(shí)執(zhí)行
   return <div>
     <h4>{count}</h4>
     <div>
       <button onClick={() => setCount(count + 1)}>+</button>
     </div>
   </div>;
 }

到此這篇關(guān)于React中useCallback useMemo到底該怎么用的文章就介紹到這了,更多相關(guān)React useCallback與useMemo內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

pubsub-js在react中的使用教程
pubsub-js?是一個(gè)用于實(shí)現(xiàn)發(fā)布-訂閱模式的 JavaScript 庫(kù),可以用于不同組件之間的通信,在 React 中,可以使用?pubsub-js?來(lái)實(shí)現(xiàn)組件之間的通信,本篇文章給大家講解pubsub-js在react中的使用,感興趣的朋友一起看看吧
2023-10-10
React?useEffect異步操作常見(jiàn)問(wèn)題小結(jié)
本文主要介紹了React?useEffect異步操作常見(jiàn)問(wèn)題小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
react實(shí)現(xiàn)路由攔截的示例代碼
這篇文章主要介紹react實(shí)現(xiàn)路由攔截的,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-02-02
解決React報(bào)錯(cuò)Property 'X' does not
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
React中多語(yǔ)言的配置方式
這篇文章主要介紹了React中多語(yǔ)言的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
React Native 啟動(dòng)流程詳細(xì)解析
這篇文章主要介紹了React Native 啟動(dòng)流程簡(jiǎn)析,文以 react-native-cli 創(chuàng)建的示例工程（安卓部分）為例，給大家分析 React Native 的啟動(dòng)流程，需要的朋友可以參考下
2021-08-08
react-routerV6版本和V5版本的詳細(xì)對(duì)比
React-Router5是React-Router6的前一個(gè)版本,它已經(jīng)被React-Router6取代,React-Router 6是一次較大的重大更新,本文就來(lái)介紹一下react-routerV6版本和V5版本的詳細(xì)對(duì)比,感興趣的可以了解一下
2023-12-12
React中如何設(shè)置自定義滾動(dòng)條樣式
這篇文章主要介紹了React中如何設(shè)置自定義滾動(dòng)條樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
詳解React組件卸載怎么中止遞歸方法
最近在處理項(xiàng)目代碼的時(shí)候,出現(xiàn)了一個(gè)bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調(diào)用自身方法,這不就是遞歸嘛,所以本文詳細(xì)給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下
2024-01-01
TypeScript在React項(xiàng)目中的使用實(shí)踐總結(jié)
這篇文章主要介紹了TypeScript在React項(xiàng)目中的使用總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04