react中的useCallback 有什么作用?

ops/2024/11/28 7:13:57/

        在 React 中,useCallback 是一个优化性能的 Hook,主要用于 记忆化(memoization)函数,从而防止在每次渲染时创建新的函数实例。具体来说,useCallback 可以帮助你确保某个函数只会在依赖项发生变化时才会重新创建,否则它会返回上一次的函数引用。

  • 适用场景:函数作为 props 传递给子组件,或者作为 useEffect 依赖项时,可以使用 useCallback 优化性能。
  • 当函数比较简单或不传递给子组件时,没有必要使用 useCallback。React 会自动优化简单的函数,不需要显式缓

  • 举例一:传递函数给子组件: 当你将一个函数作为 prop 传递给子组件时,如果该函数在每次父组件渲染时都会重新创建,子组件也会重新渲染(如果该函数作为依赖项)。通过 useCallback,你可以确保只有在相关依赖变化时才会创建新的函数。
  • import React, { useState, useCallback } from 'react';

    function Child({ onClick }) {
      console.log("Child rendered");
      return <button onClick={onClick}>Click me</button>;
    }

    function Parent() {
      const [count, setCount] = useState(0);

      // 使用 useCallback 确保只有当 count 改变时,onClick 才会更新
      const handleClick = useCallback(() => {
        setCount(count + 1);
      }, [count]);  // 依赖于 count

      return (
        <div>
          <Child onClick={handleClick} />
          <p>Count: {count}</p>
        </div>
      );
    }

    export default Parent;
    举例2 :与 useEffect 结合使用: useEffect 会在依赖项发生变化时重新运行,如果传给 useEffect 的回调函数总是被重新创建,可能会导致不必要的副作用执行。使用 useCallback 可以确保回调函数只有在必要时才被重新创建。

    import React, { useState, useEffect, useCallback } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      const memoizedCallback = useCallback(() => {
        console.log('Callback called');
      }, []); // 只有在依赖数组为空时,回调函数才会创建一次

      useEffect(() => {
        console.log('Effect ran');
        memoizedCallback();
      }, [memoizedCallback]); // 使用 memoizedCallback 作为 effect 的依赖

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }
     


http://www.ppmy.cn/ops/137292.html

相关文章

SPI SRAM串行静态随机存储器

SPI SRAM串行外设接口静态随机存储器&#xff0c;是一种在嵌入式系统中广泛使用的存储解决方案。它以其高速的数据传输速率、低功耗特性以及紧凑的封装形式&#xff0c;成为众多工程师在设计电子设备时的首选。SPI SRAM存储器通过四线制的SPI接口与主控制器连接&#xff0c;包括…

一体化数据安全平台uDSP 入选【年度创新安全产品 TOP10】榜单

近日&#xff0c;由 FreeBuf 主办的 FCIS 2024 网络安全创新大会在上海隆重举行。大会现场揭晓了第十届 WitAwards 中国网络安全行业年度评选获奖名单&#xff0c;该评选自 2015 年举办以来一直饱受赞誉&#xff0c;备受关注&#xff0c;评选旨在以最专业的角度和最公正的态度&…

滑动窗口(五)、长度最小的子数组

209. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度 。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&…

软件质量保证——软件测试流程

笔记内容及图片整理自XJTUSE “软件质量保证” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 对于软件测试中产品/服务/成果的质量&#xff0c;需要细化到每个质量特性上&#xff0c;因此出现了较为公认的软件质量模型&#xff0c;包括McCall质量模型、ISO/IEC 9126…

使用 Spring AI + Elasticsearch 让 RAG 变得简单

作者&#xff1a;来自 Elastic Laura Trotta 使用私人数据定制你的人工智能聊天机器人体验。 Spring AI 最近将 Elasticsearch 添加为向量存储&#xff0c;Elastic 团队为其提供了优化。我们很高兴展示使用 Spring AI 和 Elasticsearch 向量数据库&#xff08;vector database&…

Z2400024基于Java+SSM+mysql+maven开发的社区论坛系统的设计与实现(附源码 配置 文档)

基于SSM开发的社区论坛系统 1.摘要2.主要功能3.系统运行环境4.项目技术5.系统界面截图6.源码获取 1.摘要 本文介绍了一个基于SSM&#xff08;Spring、Spring MVC、MyBatis&#xff09;框架开发的社区论坛系统。该系统旨在打造一个高品质的开发者社区&#xff0c;为开发者提供一…

TDengine(涛数)据库安装保姆级教程

涛思数据库TDengine 安装 参考网址: TDEngine环境安装、配置及使用经验总结-CSDN博客 安装TDengine数据库3.3版本和TDengine数据库可视化管理工具_tdengine 可视化工具-CSDN博客 # 解压安装包 tar -zxvf 安装包 # 修改hostname sudo hostnamectl set-hostname tdl # 查看…

python爬虫案例——猫眼电影数据抓取之字体解密,多套字体文件解密方法(20)

文章目录 1、任务目标2、网站分析3、代码编写1、任务目标 目标网站:猫眼电影(https://www.maoyan.com/films?showType=2) 要求:抓取该网站下,所有即将上映电影的预约人数,保证能够获取到实时更新的内容;如下: 2、网站分析 进入目标网站,打开开发者模式,经过分析,我…