快捷導(dǎo)航

React中useCallback useMemo到底該怎么用

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

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

useCallback記憶函數(shù)

前言

使用緣由：

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

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

介紹

防止因為組件重新渲染,導(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更新時執(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更新時執(zhí)行callback函數(shù)，得到parent組件最新的count
   return <child>
     count:{count}
   </child>
 }

useMemo記憶組件

兩者區(qū)別

與useCallback的區(qū)別

useCallback不會執(zhí)行第一個參數(shù)函數(shù),而是將它返回給你，而useMemo會執(zhí)行第一個函數(shù)并且將函數(shù)執(zhí)行結(jié)果返回給你
類似監(jiān)聽器…監(jiān)聽更新然后執(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更新時執(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解React中父子組件數(shù)據(jù)傳遞和修改的方式及原理
這篇文章主要為大家詳細(xì)介紹了React中父子組件數(shù)據(jù)傳遞和修改的方式及原理,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
react中的虛擬dom和diff算法詳解
這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
React之防止按鈕多次點擊事件?重復(fù)提交
這篇文章主要介紹了React之防止按鈕多次點擊事件?重復(fù)提交問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
React+Redux實現(xiàn)簡單的待辦事項列表ToDoList
這篇文章主要為大家詳細(xì)介紹了React+Redux實現(xiàn)簡單的待辦事項列表ToDoList，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
通過示例源碼解讀React首次渲染流程
這篇文章主要為大家通過示例源碼解讀React的首次渲染流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
React通過conetxt實現(xiàn)多組件傳值功能
Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實現(xiàn)多組件傳值功能，感興趣的朋友一起看看吧
2021-10-10
全棧輕量級搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
淺談react 同構(gòu)之樣式直出
這篇文章主要介紹了淺談react 同構(gòu)之樣式直出,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
JavaScript React如何修改默認(rèn)端口號方法詳解
這篇文章主要介紹了JavaScript React如何修改默認(rèn)端口號方法詳解，文中通過步驟圖片解析介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
React如何實現(xiàn)Vue的watch監(jiān)聽屬性
在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒有 watch 的，今天通過本文給大家講解React實現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下
2023-06-06