關於react中useCallback的用法

Posted on by

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

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

基礎用法

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

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

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

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

第一種用法，父子組件函數式傳參

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

父組件

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);

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：