網(wǎng)站首頁 編程語言 正文
useCallback記憶函數(shù)
前言
使用緣由:
防止因?yàn)榻M件重新渲染,導(dǎo)致方法被重新創(chuàng)建,起到緩存作用
類似監(jiān)聽器…監(jiān)聽更新然后執(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)聽器…監(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更新時(shí)執(zhí)行
return <div>
<h4>{count}</h4>
<div>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
</div>;
}
原文鏈接:https://blog.csdn.net/m_xiaozhilei/article/details/125265992
相關(guān)推薦
- 2022-06-14 C#實(shí)現(xiàn)加密的幾種方法介紹_C#教程
- 2023-10-12 react函數(shù)式組件的useEffect
- 2022-07-13 rsync下行同步+inotify實(shí)時(shí)同步部署
- 2022-07-09 如何給 SAP Commerce Cloud Site 設(shè)置默認(rèn)語言
- 2022-06-25 在Nginx服務(wù)器上安裝SSL證書完成HTTPS請(qǐng)求的步驟詳解(springboot項(xiàng)目)_ngin
- 2023-05-20 Golang基于文件魔數(shù)判斷文件類型的案例代碼_Golang
- 2022-05-08 Pandas修改DataFrame列名的兩種方法實(shí)例_python
- 2022-07-07 關(guān)于C++智能指針shared_ptr和unique_ptr能否互轉(zhuǎn)問題_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支