首页 > 其他分享 >react.js中何时使用useCallback

react.js中何时使用useCallback

时间:2024-10-30 10:41:58浏览次数:1  
标签:函数 渲染 getList userId js react 组件 useCallback

useMemo用于记住值,减少重新渲染组件所需的时间。

useCallback用于记住函数,通常是为了防止组件的重新渲染

举例子组件接收回调函数作为 props
父组件引入子组件:

const getList = useCallback(
() => fetch(`http://example.com/api/${userId}`),
[userId],
);

return (

<button onClick={getList}></button> //父组件点击button按钮调用getList方法

<childComponent  clickFn={getList}> //父组件将getList方法作为参数props传递给子组件

)

使用了useCallback,getList会被记忆,当父组件多次点击button按钮调用getList方法时,React 不会在每次渲染中重新创建这个函数,只要userId没有改变,React 就会重用之前的函数实例(函数引用),userId发生了改变才会创建新的函数实例(函数引用),函数引用没有发生改变,就不会触发子组件的重新渲染。

如果不使用useCallback,每次点击button按钮,getList方法都会创建新的函数实例,从而触发子组件的重新渲染

 

标签:函数,渲染,getList,userId,js,react,组件,useCallback
From: https://www.cnblogs.com/panzai/p/18515413

相关文章

  • How to use js to parse a url string to a url object All In One
    HowtousejstoparseaurlstringtoaurlobjectAllInOne如何利用js将url字符串解析为url对象demos//consturl=globalThis.window.location.href;//consturl=window.location.href;constautoConvertPageToRepo=(page=``)=>{if(!globalThis.wi......
  • latex workshop在vscode中的settings.json设置
    //latex"latex-workshop.latex.autoBuild.run":"never","latex-workshop.showContextMenu":true,"latex-workshop.intellisense.package.enabled":true,"latex-workshop.message.error.show":fals......
  • 前端开发者必学:mo.js动画库
    前端开发者必学:mo.js动画库前言在当今的网页设计中,动态效果和交互性是提升用户体验的关键因素。mo.js,一个轻量级的JavaScript动画库,为前端开发者提供了一种简单而强大的方法来创建引人注目的动画效果。本文将向您介绍mo.js的基本概念、特点、使用场景以及如何在Vue环境......
  • nw.js的nw.Menu()自定义菜单
    nw.js是一个基于Chromium和Node.js的开源框架,它允许开发者使用HTML5、CSS3和JavaScript来创建桌面应用程序。在nw.js中,nw.Menu是一个用于创建自定义菜单栏的类,它允许开发者将自定义菜单项添加到应用程序的菜单栏中。以下是nw.Menu的主要特性和用法:特性自......
  • three.js 智慧城市扫光效果
    城市扫光效果在线预览import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{GLTFLoader}from'three/examples/jsm/loaders/GLTFLoader.js'import{DRACOLoader}from't......
  • Fastjson枚举序列化和反序列化的推荐实现
    一、背景项目中定义了很多dto,包含枚举类型,而且这些枚举全都自定义标志码。比如7001对应某种操作。返回前台时,需要转化为对应的7001,前台传入后台时也希望7001转化为枚举。二、研究思路一开始,研究了fastjson的默认实现。发现只有不自定义类似7001这种默认值的时候,可以自动转化......
  • 【SpringMVC】传递json,获取url参数,上传文件
    【传递json数据】【json概念】一种轻量级数据交互格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,其本质上是字符串,负责在不同的语言中数据传递与交换json数据以字符串的形式体现【json字符串与Java对象互转】我们需要在pom.xml中增加对json的依赖【对象转jso......
  • Vue.js组件开发全面指南:从基础到高级应用
    1.Vue.js组件概述1.1什么是Vue.js组件Vue.js组件是Vue.js框架中的核心概念,它是一种封装了特定功能的可复用代码单元。每个组件可以包含自己的模板、逻辑和样式,使得开发者能够构建大型应用时,像搭积木一样组合这些独立的组件。组件基于自定义元素进行扩展,使得开发者能够创......
  • React前端框架
    1.React简介1.1React的起源和发展React是由Facebook的内部项目发展而来,最初用于构建Instagram的网站。2013年5月,React正式对外开源,迅速以其高效的性能和灵活的组件化特点受到开发者的广泛关注和使用。React的核心库主要关注于构建UI,因此常被认为是MVC(模型......
  • 【前端】在 Next.js 开发服务器中应该如何配置 HTTPS?
    在Next.js的开发环境中,默认情况下是使用HTTP协议的。但是,您可以通过一些配置来启用HTTPS。这在开发阶段可能很有用,尤其是在需要测试涉及安全传输的应用场景时。下面是如何在Next.js开发环境中配置HTTPS的步骤:方法一:使用https模块您可以使用Node.js的内置模......