日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

React中useCallback?useMemo到底該怎么用_React

作者:碰磕 ? 更新時(shí)間: 2023-04-08 編程語言

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

欄目分類
最近更新