react中關(guān)于useCallback的用法

更新時間：2023年06月06日 14:39:06 作者：可缺不可濫

這篇文章主要介紹了react中關(guān)于useCallback的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react useCallback的用法

useCallback是react中比較重要的一個hook

useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用。

基礎(chǔ)用法

useCallback的用法與useState的用法基本一致，但最后會返回一個函數(shù)，用一個變量保存起來。

返回的函數(shù)a會根據(jù)b的變化而變化，如果b始終未發(fā)生變化，a也不會重新生成，避免函數(shù)在不必要的情況下更新。

記得子組件導(dǎo)出時使用memo包裹一下，其作用是對組件前后兩次進行淺對比，阻止不必要的更新

const a = useCallback(() => {
	return function() {
		console.log(b)
	}
},[b])
console.log(a)
console.log(a())

第一種用法，父子組件函數(shù)式傳參

既然使用useCallback減少了函數(shù)式參數(shù)不必要的更新，子組件收到的參數(shù)不變，自然也不會更新，從而減少了組件間不必要的更新。

父組件

import React, { useState, useEffect, useCallback, useRef } from 'react';
import CC from './cc';
const Props: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [p, setP] = useState('1');
  const [ccVisible, setCCVisible] = useState(false);
  console.log('-- Props --');
  const onClick = useCallback(() => {
    console.log('onClick');
    setCCVisible(true);
  }, []);
  const onClose = useCallback(() => {
    console.log('onClose');
    setCCVisible(false);
  }, []);
  useEffect(() => {
    setTimeout(() => {
      setP('2');
      setLoading(false);
    }, 1000);
  }, []);
  if (loading) {
    return <div>loading</div>;
  }
  return (
    <div>
      <p>
        <span onClick={onClick2}>ddd</span>
      </p>
      <CC visible={ccVisible} onClick={onClick} onClose={onClose} text={p} />
    </div>
  );
};
export default Props;

子組件

import React, { useState, useEffect, memo } from 'react';
import { Modal } from 'antd';
interface CCProps {
  visible: boolean;
  text: string;
  onClick: () => void;
  onClose: () => void;
}
const CC: React.FC<CCProps> = ({ visible, onClick, onClose, text }) => {
  console.log('-- CC --');
  const [ccc, setCCC] = useState('00000');
  const onClickC = () => {
    console.log('onClickC');
  };
  useEffect(() => {
    setTimeout(() => {
      console.log('-- effect setCCC --');
      setCCC('3333');
    }, 2000);
    return () => {
      console.log('-- delete CC --');
    };
  }, []);
  return (
    <div>
      {visible ? 'show' : null}
      <p onClick={onClick}>323 - {ccc}</p>
      <p>
        <span onClick={onClickC}>ccc -- ddddddd</span>
      </p>
      <Modal visible={visible} onCancel={onClose} footer={null}>
        Modal
      </Modal>
    </div>
  );
};
export default memo(CC);

react useCallback函數(shù)使用說明

React 中useCallback的作用：函數(shù)相等性檢查。

useCallback的函數(shù)原型

useCallback(callbackFun, deps)

如果deps給出的依賴值不變，則useCallback在兩次渲染階段之間返回相同的函數(shù)實例。

考察如下代碼：

function func_factory() {
? return (a, b) => a + b;
}
const sum1 = func_factory();
const sum2 = func_factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => true

sum1 和 sum2 是將兩個數(shù)字相加的函數(shù)，它們是由 func_factory() 函數(shù)創(chuàng)建的。

函數(shù) sum1 和 sum2 共享相同的代碼源，但是它們是不同的對象，比較它們 sum1 === sum2 結(jié)果為 false。這就是JavaScript的工作方式，對象（包括函數(shù)對象）僅等于其自身。

在React中，共享相同代碼的不同函數(shù)實例往往在React組件內(nèi)部創(chuàng)建。

當 React 組件主體創(chuàng)建一個函數(shù)（例如回調(diào)或事件處理程序）時，這個函數(shù)會在每次渲染時重新創(chuàng)建。

例如如下代碼：

handleClick 在 MyComponent 的每次渲染中都是一個不同的函數(shù)對象。

import React from 'react';
function MyComponent() {
? // handleClick在每次渲染時重新創(chuàng)建
? const handleClick = () => {
? ? console.log('Clicked!');
? };
? // ...
}

因為內(nèi)聯(lián)函數(shù)很“便宜”，所以React在每次渲染時重新創(chuàng)建函數(shù)不是問題，React的每個組件有幾個內(nèi)聯(lián)函數(shù)是可以接受的。

然而，在某些情況下，你需要保留一個函數(shù)的一個實例，在React中以下情況需要保持內(nèi)聯(lián)函數(shù)的的變量值不變：

1）包裝在 React.memo()（或 shouldComponentUpdate ）中的組件接受回調(diào)prop。

2）當函數(shù)用作其他hooks的依賴項時 useEffect(...，[callback])

useCallback 函數(shù)可以保證在deps不變的情況下，相同的代碼片段返回同一個函數(shù)對象。

例如如下代碼：

import React, { useCallback } from 'react';
function MyComponent() {
? // handleClick是同一個函數(shù)對象
? const handleClick = useCallback(() => {
? ? console.log('Clicked!');
? }, []);
? // ...
}

handleClick 變量將在 MyComponent 不同的渲染周期之間始終保持返回相同的回調(diào)函數(shù)對象實例。

一個用于理解useCallback的示例

如下代碼，需要渲染一個大的列表，

import React from 'react';
function MyBigList({ items, handleClick }) {
? const map = (item, index) => (
? ? <div onClick={() => handleClick(index)}>{item}</div>;
? );
? return <div>{items.map(map)}</div>;
}
export const MyBigList = React.memo(MyBigList);

MyBigList 渲染了一個項目列表，這個列表可能很大，可能有幾百個元素。要保留重新渲染的列表，可以將其封裝到 React.memo 中。

MyBigList 的父組件需要提供元素列表和點擊事件處理回調(diào)函數(shù)。

調(diào)用MyBigList的父組件及其示例代碼如下：

import React from 'react';
import useSearch from './fetch-items';
function MyParent({ term }) {
? const handleClick = useCallback((item) => {
? ? console.log('You clicked ', item);
? }, [term]);
? const items = useSearch(term);
? return (
? ? <MyBigList
? ? ? items={items}
? ? ? handleClick={handleClick}
? ? />
? );
}

handleClick 回調(diào)函數(shù)由 useCallback() 記憶。只要 term 變量保持不變，useCallback() 就會返回相同的函數(shù)對象實例。

現(xiàn)在由于某些原因重新啟用了 MyParent 組件，handleClick 仍保持不變，并且不會破壞 MyBigList的記憶，列表將避免重新渲染，提高性能。

一個錯誤使用useCallback的示例

import React, { useCallback } from 'react';
function MyComponent() {
? const handleClick = useCallback(() => {
? ? // handle the click event
? }, []);
? return <MyChild onClick={handleClick} />;
}
function MyChild ({ onClick }) {
? return <button onClick={onClick}>I am a child</button>;
}

以上示例代碼用useCallback記住 handleClick 是否有意義？

答案時：沒有意義，因為調(diào)用 useCallback() 其實需要很多工作，每次渲染 MyComponent 時，都會調(diào)用 useCallback() Hook。

從內(nèi)部來講，React確保返回相同的對象函數(shù)實例。即便如此，內(nèi)聯(lián)函數(shù)仍然在每次渲染時重新創(chuàng)建，useCallback 只是跳過了它，返回內(nèi)部記錄的原始實例而已。

即使用 useCallback() 返回相同的函數(shù)實例，也不會帶來任何好處，因為優(yōu)化要比沒有優(yōu)化花費更多。

不要忘記增加的代碼復(fù)雜性，你必須確保 useCallback() 的 deps 與您在 memoized 回調(diào)中使用的 deps 保持同步。