react組件memo useMemo useCallback使用區(qū)別示例

更新時(shí)間：2022年07月25日 10:52:24 作者：SODA_HA

這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

memo用來優(yōu)化函數(shù)組件的重復(fù)渲染行為，針對(duì)的是一個(gè)組件

useMemo返回一個(gè)memoized的值

本質(zhì)都是用同樣的算法來判定依賴是否發(fā)生改變，繼而決定是否觸發(fā)memo或者useMemo中的邏輯，利用memo就可以避免不必要的重復(fù)計(jì)算，減少資源浪費(fèi)

useCallback返回一個(gè)memoized的函數(shù)

useMemo和useCallback都接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為fn，第二個(gè)參數(shù)為[]，數(shù)組中是變化依賴的參數(shù) memo則可以直接作用于組件，例如

    export default memo(Mycomponent)

useMemo和useEffect的執(zhí)行時(shí)機(jī)是不一致的：useEffect執(zhí)行的是副作用，所以一定是在渲染之后執(zhí)行的，useMemo是需要有返回值的，而返回值可以直接參與渲染的，所以u(píng)seMemo是在渲染期間完成的

memo使用

    // 父組件
    const Parent = ()=>{
        const [count, setCount] = useState(1)
        const addCount = ()=>{
           setCount(count + 1)
        }
        return(
            <>
             <div onClick={addCount}>計(jì)數(shù): {count}</div>
             <Child />
            </>
        )
    }
    // 子組件
    const Child = memo(()=>{
        console.log('child start---')
        return(
            <div>child...</div>
        )
    })
    // 使用memo后，子組件的props或者state沒有變化時(shí)，將不會(huì)對(duì)子組件進(jìn)行渲染

useMemo使用

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值變化時(shí)才會(huì)觸發(fā)sum函數(shù)執(zhí)行

useCallback使用

    // 父組件，給子組件傳遞name和changeName方法
    const Parent = () => {
      const [count, setCount] = useState(1);
      const [name, setName] = useState("bbz");
      const addCount = () => {
        setCount(count + 1);
      };
      const changeName = useCallback((n) => {
        setName(n);
      }, []);
      return (
        <>
          <div onClick={addCount}>計(jì)數(shù): {count}</div>
          <Child name={name} changeName={changeName} />
        </>
      );
    };
    // 子組件
    const Child = ({ name, changeName }) => {
      console.log("child start---");
      return (
        <div
          onClick={() => {
            changeName("bobozai");
          }}
        >
          child comps: {name}
        </div>
      );
    };
    // 如果不使用useCallback,則點(diǎn)擊父組件計(jì)數(shù)的同時(shí)，子組件會(huì)console進(jìn)行渲染，
    // 因?yàn)楦耤ount時(shí)父組件會(huì)重新渲染，導(dǎo)致重新生成了一個(gè)changeName函數(shù)，
    // 所以子組件的props變了，導(dǎo)致子組件會(huì)重新渲染
    // 而對(duì)changeName函數(shù)用useCallback進(jìn)行包裹，則對(duì)函數(shù)進(jìn)行緩存不會(huì)重新生成

以上就是react組件memo useMemo useCallback使用區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于react組件memo useMemo useCallback的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: