React中useCallback useMemo到底該怎么用
更新時間：2023年02月06日 14:55:43 作者：碰磕
在React函數(shù)組件中，當組件中的props發(fā)生變化時，默認情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender
useCallback記憶函數(shù)
前言
使用緣由：
防止因為組件重新渲染,導致方法被重新創(chuàng)建,起到緩存作用
類似監(jiān)聽器…監(jiān)聽更新然后執(zhí)行操作
介紹
防止因為組件重新渲染,導致方法被重新創(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]) //當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彈窗使用方式NiceModal重新思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
使用useImperativeHandle時父組件第一次沒拿到子組件的問題
這篇文章主要介紹了使用useImperativeHandle時父組件第一次沒拿到子組件的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能2024-10-10
寫react的時候，踩了幾次坑發(fā)現(xiàn)setstate之后state不會立刻更新，于是判定setstate就是異步的方法，但是直到有一天，我想立刻拿到更新的state去傳參另一個方法的時候，才問自己，為什么setstate是異步的？準確地說，在React內(nèi)部機制能檢測到的地方，setState就是異步的2022-10-10
這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
React tabIndex使非表單元素支持focus和blur事件
這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關(guān)于React中this丟失的四種解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用React具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要介紹了ReactRouter的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
中間件就是一個函數(shù)，對store.dispatch方法進行了改造，在發(fā)出 Action 和執(zhí)行 Reducer 這兩步之間，添加了其他功能，要理解中間件，關(guān)鍵點是要知道，這個中間件是連接哪些部分的軟件，它在中間做了什么事，提供了什么服務(wù)2023-01-01
本篇文章主要介紹了在React 組件中使用Echarts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11