这篇文章主要介绍“react中useCallback怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react中useCallback怎么使用”文章能帮助大家解决问题。
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);
关于“react中useCallback怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。