關于react中useCallback的用法

更新時間：2022年08月05日 08:40:14 作者：可缺不可濫

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

基礎用法

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

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

記得子組件導出時使用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);

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: