为什么这里用的是React.useCallback，而不是普通函数？

在React中，使用React.useCallback而不是普通函数的原因是为了优化性能和避免不必要的重新渲染。

React.useCallback是一个自定义的hook，它用于创建一个记忆化的回调函数。当使用普通函数作为回调函数时，每次组件重新渲染时，该函数都会被重新创建，即使函数的实现没有发生变化。这可能会导致子组件的不必要重新渲染，从而影响性能。

而使用React.useCallback可以解决这个问题。它接受一个回调函数和一个依赖项数组作为参数。只有当依赖项数组中的值发生变化时，才会重新创建回调函数。这样可以确保只有在依赖项发生变化时，才会触发子组件的重新渲染。

使用React.useCallback的优势包括：

性能优化：避免不必要的函数重新创建和组件重新渲染，提高应用的性能。
避免子组件的不必要渲染：当父组件重新渲染时，子组件只有在依赖项发生变化时才会重新渲染，减少不必要的渲染操作。
代码可读性：通过使用React.useCallback，可以清晰地表达出该函数是一个记忆化的回调函数，提高代码的可读性和可维护性。

在使用React.useCallback时，需要注意以下几点：

需要确保依赖项数组中的值是稳定的，避免出现意外的重新渲染。
如果依赖项数组为空，那么每次组件重新渲染时，都会返回相同的回调函数。

对于React.useCallback的更详细介绍和使用示例，可以参考腾讯云的React.useCallback文档：React.useCallback - 腾讯云

相关·内容

为什么 Docker 和 Kubernetes 是用 Go 写的而不是 C# ？

HahahahahaSoFunny 为什么 Docker 和 Kubernetes 工具是用 Go 写的而不是 C#？总所周知，现在开发人员使用的很多新工具大多是用 Go 写的。...为什么不是 C# 呢? .NET 和 C# 现在功能已经很强大了，是不是社区缺少这种文化？如何才能培养一种更加开源的文化, 因为很多开发人员对 .NET 和 C# 仍然还抱有偏见。...haho5: 不确定为什么 Docker 是用 Go 写的, 但是 Kubernetes 确实是 Google 开发的，并且 Golang 也是。...而像 C/C++ 这样的稍微低级的语言可以让您更接近硬件，对性能有要求时，这是最合适的。我可以用螺丝刀敲打钉子很多次，也可以用锤子花很大的力气把螺丝打进去，都可以完成工作。...它从 2.0 到现在的 10.0 变化非常快，相同的代码逻辑可以用太多不同的方式编写。而 GO 是一门简单的语言，很受欢迎，因为好的代码应该易于阅读和理解，以便成千上万的开源程序员做出贡献。

1.1K0 0

为什么 useState 返回的是 array 而不是 object？

[count, setCount] = useState(0) 这里可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？...为什么是返回数组而不是返回对象要弄懂这个问题要先明白 ES6 的解构赋值，来看 2 个简单的例子：数组的解构赋值 const foo = [1, 2, 3]; const [one, two, three...); // 第二次使用 const { state: counter, setState: setCounter } = useState(0) 这里可以看到，返回对象的使用方式还是挺麻烦的，更何况实际项目中会使用的更频繁...总结 useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就得定义别名了首发自：为什么 useState...返回的是 array 而不是 object？

2.2K2 0

在大厂为什么被裁员的总是普通员工而不是领导？

但是公司不景气，导致业务线被裁掉了，那么第一个被裁的总是一线业务线的普通开发，这个时候老员工和领导总是能够很好的躲过去，而避免自己在没有找到下家之前而被裁掉。...在老板眼中，领导干部才是他所认为的核心？在老板眼中，领导干部才是他所认为的核心？这个我是不认同的，但是我不是老板，也许这个可能就是我不能当老板的原因吧！...老板认为，我只需要管理这几十个领导，就可以管理一个上千人的公司，而不是说要和一线员工去打交道，那个是得补偿失的。...假如真的要裁员，那么走几个普通的员工影响不大，但是走了一个领导，那就意味着很难找人去替代。当然这里也并不是说非这个人不可，只是说段时间就很难有人把那一摊子事情给接下来。...也就是说普通员工一定要让自己成为老板眼中有价值的人，但是有一个前提，那就是自己一定要预先成为自己领导或者部门的人眼中有价值的人，这样你才能够在面对裁员大潮的时候，有自主选择的权利，而不是非常的被动。

2132 0

是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型

Vue() //此时的vm1应该是这样的 vm1 = { //这里的data，是先获取了函数Vue中的data（data的值为函数），然后得到了data的返回值 this.data = {...Vue() //此时vm2是这样的 vm2 = { //这里的data，是先获取了函数Vue中的data（data的值为函数），然后得到了data的返回值 data: { name: '李四...55' } } //创建了一个Vue实例，会调用上面的定义的函数 let vm1 =new Vue() //此时的vm1应该是这样的 vm1 = { //这里的data是获取了函数Vue中的data...= { //这里的data是获取了函数Vue中的data属性的值 data: { name: '李四', age: '55' } } //将数据渲染到页面上 //此处的name会调用实例对象...此时的情况用图这样表示： ? 结束语所以讲了那么多，还是一个概念，引用数据类型的表现形式，如果还是有小伙伴不懂的，一定要翻到引言部分，点击链接去看一下这个概念，否则很难理解本篇文章。

3.4K3 0

面试官：为什么data属性是一个函数而不是一个对象？

警告说明：返回的data应该是一个函数在每一个组件实例中二、组件data定义函数与对象的区别上面讲到组件data必须是一个函数，不知道大家有没有思考过这是为什么呢？...在我们定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例这里我们模仿组件构造函数，定义data属性，采用对象的形式 function Component(){ } Component.prototype.data...getData(data, vm) : data || {} ... } data既能是object也能是function，那为什么还会出现上文警告呢？...（根实例是单例），不会产生数据污染情况组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。...面试官：为什么Vue中的v-if和v-for不建议一起用? 面试官：SPA（单页应用）首屏加载速度慢怎么解决？面试官：Vue中组件和插件有什么区别？

3.1K1 0

框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数而不是对象

在vue组件中data的属性值是函数,如下所示 export default { data() { // data是一个函数,data: function() {}的简写 return...// data是一个对象 name: 'itclanCoder', }, }; 当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例也就是说,在很多页面中...,定义的组件可以复用在多个页面如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例中修改data,都会影响到所有的组件实例如果data是函数,每次创建一个新实例后...,实例化出来的对象(p1,p2)都指向的是同一份实体原型下的属性相当于是公有的修改一个实例对象下的属性,也会造成另一个实例属性跟着改变,这样在组件复用的时候,肯定是不行的,那么改成函数就可以了的,如下代码所示...'itclanCoder', }; }; var p1 = new Person(); var p2 = new Person(); p1.data.name = '随笔川迹'; // 如果是函数的形式去定义属性

1.9K2 0

Java里面Join()，为什么等待的是主线程，而不是当前子线程？

但是仔细一想，发现这个明明调用的是子线程的join（）方法，按道理应该子线程等待执行才是，为什么反而是主线程等待了呢？...源码中注释说明的是等待这个线程终止，那就是等待调用Join（）的线程终止，再继续往下看： /** * Waits at most {@code millis} milliseconds for...注意按照程序的执行顺序，我们这里是主线程调用的Thread的Join方法，所以是判断子线程的存活状态，满足则让子线程执行，主线程来等待。...wait 等待方法是让线程进入等待队列，使用方法是 obj.wait(); 这样当前线程就会暂停运行，并且进入obj的等待队列中，称作“线程正在obj上等待”。...可以把子线程t理解为一个普通的obj对象，调用t的wait()方法，实际上就是主线程（main线程）在childThread对象的队列上等待，可以转换为如下写法进一步理解： /** * 主线程 */

7985 0

为什么企业数据库转向的是 CLOUD DATABASE 而不是国产数据库

这些对于数据库有什么影响，其实就是成本的问题，一个企业本身是一个盈利机构，盈利机构中就必须要针对投入产出比进行衡量，IT 的成本尤其是机房的建设本身对于企业的消耗是蛮大的，并且这些还是一个持续性的投入，...随着经济的问题凸显，各个企业的项目会缩减，维稳是一个主基调，对于一些项目的建设大多是基于灵活性的运作方式，也就是项目是走一步算一步，并且灵活性很高，而针对这些新的项目的建设就需要评估，而在搞不清这些项目的持续回报的情况下...国产数据库本身的买家大部分都不是企业，而是国内的政府机构，之前国内的政府机构的预算充足，可以进行阶段化的持续性的购买，并且对于投入的产出比并不会进行细致的估算，大多是形象项目。...同时对于企业来说，降低IT 类雇员的数量也是一个轻装上阵的方式，更少的维护人员，与更高的稳定性本身并不是一个矛盾体，通过云上的基础建设可以满足以上的要求。...基于数据库产品，国内的大部分云厂商都提供了产品，并且随着使用的企业越来越多，对于产品的持续迭代和快速的更新也是吸引企业持续使用云上产品的保证书，终究企业都是希望使用的产品是被验证过的，而不是去当小白鼠。

7514 0

C++核心准则C.49:构造函数中应该做的是初始化而不是赋值

C.49: Prefer initialization to assignment in constructors C.49:构造函数中应该做的是初始化而不是赋值 Reason（原因） An initialization...初始化明确地表明所做的是初始化而不是赋值，而且可以做得更优美，更有效率。防止“赋值之前使用”的错误。...; p = new int{10}; } // accidental use before initialized // ... }; Example, better still（更好的示例...general way to present arguments to a function: 相对于那些const char* s，我们应该可以使用gsl::string_span或者(C++17引入的）...std::string_view作为表达函数参数怒的更加普遍的方式（https://github.com/isocpp/CppCoreGuidelines/blob/master/CppCoreGuidelines.md

1.2K1 0

闲话--为什么下一代的数据库产品是云原生数据库，而不是你

为什么下一代的数据库是基于云原生的数据库，WHY ，因为市场。...所以下面要探讨的不是纯技术，如同人生一样，不是你是三好学生，985,211，你就一定是人生的赢家，所以谈一个产品的未来，要看你是否有能力用产品打开市场,或者掌握流量密码。...所以那些还在打着，本地部署的数据库可以看到夕阳了，这就好比你还在生产方便面，但突然卖不动，不是因为其他的方便面更便宜，是因为有了外卖，有外卖我为什么要吃方便面。...说到这里，产品本身不重要，产品的所属地是重要的，谁拿着流量的龙头，谁就有让谁成功上位的流量密码。...说的有点远，到底云数据库是什么，云数据库本身应该是一套体系，一套可以满足客户从数据库使用，到数据库安全，数据安全，各种基于数据库周边需求和服务，注意他是一套服务，而不是和现在的传统数据库厂商生产出来的产品一样的性质的东西

5962 0

为什么 C# 的 string.Empty 是一个静态只读字段，而不是一个常量呢？

进一步可以发现 string.Empty 实际上是一个静态只读字段，而不是一个常量。 为什么这个看起来最适合是常量的 string.Empty，竟然使用静态只读字段呢？...也就是说，string.Empty 字段并不是一个普通的字段，对它的调用会被特殊处理。但是是如何特殊处理呢？...实际上这里说的是 IL 调用字符串时的一些区别：在调用 "" 时使用的 IL 是 ldstr ""（Load String Literal）而在调用 string.Empty 时使用的 IL...string.Empty 需要是一个静态只读字段而不是常量？...String 类的构造函数（注意不是静态构造函数，String 类的静态构造函数是特殊处理不会调用的）；而如果这是一个静态字段，那么编译器可以在不做特殊处理的情况下，生成 ldsfld string

1.1K0 0

如何测自定义的 React Hooks？

当然这里的 Hooks 不是指那些你为了减少组件体积而抽离出来的业务逻辑 Hooks（这些应该通过组件测试来测的），而是那些你要发布到 NPM 或者 Github 上的，可重复使用的 Hooks。...我看到很多人都会犯的一个错就是：总是想 “Hook 嘛，不就是个纯函数么？就因为这样我们才喜欢用 Hook 的嘛。那是不是就可以像直接调普通函数那样，测试函数的返回值呢？”...对但是不完全对，它确实是个函数，但严格来说，它并不是纯函数，你的 Hooks 应该是幂等的。如果是纯函数，那直接调用然后看看返回输出是否正确的就可以了。...最终结果就是，测试挂了并不是因为 Hook 有问题，而是因为你的例子太复杂而导致的问题。还有一个问题会让这个问题变得更复杂。...”，而不是你真正想测的东西。

8172 0

什么时候使用 useMemo 和 useCallback

我们来谈谈 useMemo 和 useCallback 的成本和收益。这里是一个糖果提售货机： ?...我唯一要改变的是在 React.useCallback 里包裹 dispense 函数： const dispense = React.useCallback(candy => { setCandies...正确答案是：使用原来的代码性能会更好? 为什么 useCallback 更糟糕？！...，它将始终计算为 true，意味着每次渲染后都会调用 useEffect 回调，而不是仅在 bar 和 baz 更改时调用。...，这样你才能决定在你的案例中它是否能真的有帮助（而不是有害的）。

2.5K3 0

React 中解决 JS 引用变化问题的探索与展望

const a = {}; const b = {}; console.log(a === b); // false 而 React 函数组件每次渲染都会调用自身函数，函数内定义的所有局部变量都会被重新创建...因为复杂引用的问题根本原因是对象的引用会随着重新渲染而变化，而 Ref 中保存的值不会在每次渲染时销毁和新建。...Record 和 Tuple 类型在 JS 中，对象的比较不是值的比较，而是引用的比较。这点是由 JS 语言本身决定的。有没有可能从 JS 语言这方面去解决呢？...的比较采用的是值比较，而不是引用比较： const a = #{}; const b = #{}; console.log(a === b); // true const c = #[] const...但遗憾的是，这次只提案了 Object 和 Array，Function 仍然没有得到支持，所以 useCallback 还是得继续接着用。

2.3K1 0

120. 精读《React Hooks 最佳实践》

然而需要理解的是，没有一个完美的最佳实践规范，对一个高效团队来说，稳定的规范比合理的规范更重要，因此这套方案只是最佳实践之一。精读环境要求拥有较为稳定且理解函数式编程的前端团队。...用 React.useMemo 优化渲染性能。用 App.defaultProps 定义 Props 的默认值。 FAQ 为什么不用 React.memo?...推荐使用 React.useMemo 而不是 React.memo，因为在组件通信时存在 React.useContext 的用法，这种用法会使所有用到的组件重渲染，只有 React.useMemo 能处理这种场景的按需渲染...FAQ 可以在函数内直接申明普通常量或普通函数吗？不可以，Function Component 每次渲染都会重新执行，常量推荐放到函数外层避免性能问题，函数推荐使用 useCallback 申明。...函数所有 Function Component 内函数必须用 React.useCallback 包裹，以保证准确性与性能。

1.2K1 0

初识字节流+实现缓冲字节流OutputStream的主要方法构造方法读关流实现BufferedInputStream实现BufferedOutputStream为什么read()返回的是Int型而不是

false的话，那么会抛出FileNotFoundException 读 read():int read(byte[] array):int 与Reader类一样，如果到了文件末尾，返回-1 这里有个特别好用的方法...，可以用来知道文件的大小 available():int; 返回文件的字节数这时就可以用这个方法来定义array的大小，那么就可以一次性读完了关流 flush() ---- 缓冲技术缓冲技术就是把信息分批处理...C:\Users\钟绍威\Desktop>java Test 复制所用时间：183毫秒用Java自带的BufferedInputStream和BufferedOutputStream试试 import...输出的缓冲就是把数据存到数组中，再一起写到OutputStream中的缓冲区，最后在刷新刚刚用这个复制一个11.1M的MP3花了0.6秒，和系统的时间差不多↖(^ω^)↗！！...---- 错误的返回了-1 如果扫描到了11111111那么此时将byte->int是-1，如果这样的话，程序就会终止不会进行 为什么read()返回的是Int型而不是byte型呢？？

1.3K8 0

深入了解 useMemo 和 useCallback

如果我们已经有了一个给定数字的质数列表，为什么不重用这个值而不是每次都从头计算呢？这正是 useMemo 允许我们做的。...但我们优化的是父组件，而不是特定的慢代码行。我并不是说一种方法比另一种更好；每种工具在工具箱中都有自己的位置。但在这个特定的情况下，我更喜欢这种方法。...这是一个简短的版本：「这是完全相同的事情，但用于函数而不是数组/对象」。...与数组和对象类似，函数是根据引用比较的，而不是根据值： const functionOne = function() { return 5; }; const functionTwo = function...v); }, []); return [value, toggle]; } 注意，toggle 函数是用 useCallback 记忆的。

8.9K3 0

记录升级 React 18 后发现的一些问题，很有用

为什么会这样呢?改变了什么? 先说原因吧：我的应用程序在React 18中崩溃的原因是我使用的是StrictMode。...登录到我们的useDebounce，因为那是我们的函数应该被调用的地方。...当前的回调函数没有被调用:这就是我们想要被取消的函数。...事实上，这篇文章可能有点用词不当——React团队表示，他们已经在Facebook的核心代码库中升级了数千个组件，而没有出现重大问题。...我们需要确保初始化在每个useEffect实例上运行，而不是依赖useRef来初始化该值一次。

1.2K3 0

React 项目性能分析及优化

性能优化不是一个简单的事情，但在 95% 以上的 React 项目中，是不需要考虑的，按自己的想法奔放的使用就可以了。我认为性能优化最好的时候是项目启动时。...我们知道 JS 是单线程的，也就是执行代码与绘制是同一个线程，必须等代码执行完，才能开始绘制。那具体是那一块代码执行时间长了呢？这里我们就要看 Main 这一栏，这一栏列出了 JS 调用栈。...如果你的数据不是 immutable 的，或许你可以自己手动通过 ShouldComponentUpdate 来进行深比较。当然深比较的性能一般都不好，不到万不得已，最好不要这样搞。...善用 React.useMemo React.useMemo 是 React 内置 Hooks 之一，主要为了解决函数组件在频繁 render 时，无差别频繁触发无用的昂贵计算，一般会作为性能优化的手段之一...合理使用 React.useCallback 在函数组件中，React.useCallback 也是性能优化的手段之一。

1.8K2 0

精读《一种 Hooks 数据流管理方案》

操作数据或行为的函数方法。对组件来说，被调用时的传参既可能是可变数据，也可能是不可变数据。...，所以即使是变量也可以直接获取，因为它不会变化，也不会导致重渲染 // fetchData 是取数函数，内置发送了 appId，所以绑定了一定上下文，也属于不可变数据 const { appId...const SubMenu = () => { // defaultValue 是一次性值，所以处理时做了不可变处理，这里已经是不可变数据了 // onMenuClick 是回调函数，不管传参引用如何变化...，这里都处理成不可变的引用 const { defaultValue, onMenuClick } = useMenu() // disabled 是 menu 的参数，需要在变化时立即响应，...自定义 hooks，入参是 staticValue getState setState，这里可以封装自定义方法，并且定义的方法都必须是静态的，可以直接通过 useInput().xxx 访问到。

5211 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云