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);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
