关于react中useCallback的用法
更新时间:2022年08月05日 08:40:14 作者:可缺不可滥
这篇文章主要介绍了关于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中Suspense及lazy()懒加载及代码分割原理和使用方式
这篇文章主要介绍了React中Suspense及lazy()懒加载及代码分割原理和使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论