文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

关于react中useCallback的用法

2022-11-13 14:19

关注

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);

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯