您现在的位置是：网站首页> 编程资料编程资料

关于react中useCallback的用法_React_

2023-05-24 359人已围观

简介关于react中useCallback的用法_React_

基础用法

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 loading
; } return ( ddd
 ); }; 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 = ({ 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 (  {visible ? 'show' : null} 323 - {ccc}
ccc -- ddddddd
 Modal 
 ); }; export default memo(CC);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：微信小程序实现发动态功能的示例代码_javascript技巧_

下一篇：简单谈谈Angular中的独立组件的使用_AngularJS_

您现在的位置是：网站首页> 编程资料编程资料

关于react中useCallback的用法_React_

目录

基础用法

父组件

子组件

相关内容

点击排行

本栏推荐

猜你喜欢