Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >react useCallback完美替代方案

react useCallback完美替代方案

作者头像
ACK
发布于 2021-01-21 10:51:22
发布于 2021-01-21 10:51:22
1.6K00
代码可运行
举报
运行总次数:0
代码可运行

react函数组件为了保持引用不变,很多时候需要借助useCallback,但是useCallback强依赖于外部变量,必须传个依赖变量,万一漏传了很容易出问题。比较函数复杂时较麻烦,使用这个即可完美解决,引用不变,调用肯定是最新的,并且不需依赖

just 记录方便cp

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function usePersistCallback<T extends(...args: any[]) => any>(fn?: T) {
  const ref = useRef<T>();

  ref.current = fn;

  return useCallback<T>(
    // @ts-ignore
    (...args) => {
      const fn = ref.current;
      return fn && fn(...args);
    },
    [ref],
  );
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/01/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
让你 React 组件水平暴增的 5 个技巧
最近看了一些 Ant Design 的组件源码,学到一些很实用的技巧,这篇文章来分享一下。
神说要有光zxg
2023/08/29
5900
让你 React 组件水平暴增的 5 个技巧
120. 精读《React Hooks 最佳实践》
React 16.8 于 2019.2 正式发布,这是一个能提升代码质量和开发效率的特性,笔者就抛砖引玉先列出一些实践点,希望得到大家进一步讨论。
黄子毅
2022/03/14
1.3K0
ahooks 是怎么解决 React 的闭包问题的?
本文是深入浅出 ahooks 源码系列文章的第三篇,这个系列的目标主要有以下几点:
GopalFeng
2022/08/01
1.3K0
ahooks 是怎么解决 React 的闭包问题的?
这些 hook 更优雅的管理你的状态
本文是深入浅出 ahooks 源码系列文章的第十二篇,这个系列的目标主要有以下几点:
GopalFeng
2022/08/01
9720
你不知道的 useCallback
对于新手来说,没写过几次死循环的代码都不好意思说自己用过 React Hooks。本文将以useCallback为切入点,谈谈几个 hook 的使用场景,以及性能优化的一些思考。
Dickensl
2022/06/14
7330
React官方团队出手,补齐原生Hook短板
然而实际上,由于回调函数被useCallback缓存,形成闭包,所以点击的效果始终是sendMessage('')。
公众号@魔术师卡颂
2022/06/10
1K0
React官方团队出手,补齐原生Hook短板
从根上理解 React Hooks 的闭包陷阱(续集)
上篇文章我们知道了什么是 hooks 的闭包陷阱,它的产生原因和解决方式,并通过一个案例做了演示。
神说要有光zxg
2022/06/06
9190
从根上理解 React Hooks 的闭包陷阱(续集)
[Concent小课堂]认识组合api,换个姿势撸更清爽的react
开源不易,感谢你的支持,❤ star me if you like concent ^_^
fantasticsoul
2020/08/16
1.5K0
[Concent小课堂]认识组合api,换个姿势撸更清爽的react
详细解读 React useCallback & useMemo
阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。
夏天的味道123
2022/09/25
6100
104.精读《Function Component 入门》
如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性。但在尝试之前,最好先阅读本文,对 Function Component 的思维模式有一个初步认识,防止因思维模式不同步造成的困扰。
黄子毅
2022/03/14
1.8K0
React 16.x 新特性, Suspense, Hooks, Fiber
React 16.6.0 引入了lazy和Suspense。React.lazy函数可以渲染一个动态的import作为一个组件。Suspense悬停组件,它会在内容还在加载的时候先渲染fallback。它们组合就能实现之前主要是使用loadable-components,来异步加载组件,Code-Splitting。
小刀c
2022/08/16
9260
React 16.x 新特性, Suspense, Hooks, Fiber
Hooks与事件绑定
在React中,我们经常需要为组件添加事件处理函数,例如处理表单提交、处理点击事件等。通常情况下,我们需要在类组件中使用this关键字来绑定事件处理函数的上下文,以便在函数中使用组件的实例属性和方法。React Hooks是React 16.8引入的一个新特性,其出现让React的函数组件也能够拥有状态和生命周期方法。Hooks的优势在于可以让我们在不编写类组件的情况下,复用状态逻辑和副作用代码,Hooks的一个常见用途是处理事件绑定。
WindRunnerMax
2023/04/24
1.9K0
97.精读《编写有弹性的组件》
读了 精读《useEffect 完全指南》 之后,是不是对 Function Component 的理解又加深了一些呢?
黄子毅
2022/03/14
5400
[译] React 中的 "最新 Ref 模式"
原文: https://epicreact.dev/the-latest-ref-pattern-in-react/
江米小枣
2023/12/06
2250
[译] React 中的 "最新 Ref 模式"
useCallback 使用的4个阶段
前几天我的一位学生跟我探讨了一种 useCallback 的用法,他的想法是:当我们在封装开源工具库时,对自定义 hook 中暴露出来的钩子函数使用 useCallback 缓存。因为我们并不确定使用者是否需要一个引用稳定的钩子函数,他们有可能是需要的,因此用 useCallback 来包一层是有意义的。但是他并不确定这样的做法是否合适,是否具备较大的正向收益。
用户6901603
2023/12/15
1840
React Hooks 深入系列 —— 设计模式
本文是 React Hooks 深入系列的后续。此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子作了阐述。
牧云云
2019/08/01
2K0
精读《React useEvent RFC》
本周我们结合 RFC 原文与解读文章 What the useEvent React hook is (and isn't) 一起了解下这个提案。
黄子毅
2022/06/10
4890
【react】203-十个案例学会 React Hooks
原文地址:https://github.com/happylindz/blog/issues/19
pingan8787
2019/07/23
3.2K0
useMemo与useCallback
useMemo和useCallback都可缓存函数的引用或值,从更细的角度来说useMemo则返回一个缓存的值,useCallback是返回一个缓存函数的引用。
WindRunnerMax
2022/05/06
5860
React 进阶:Hooks 该怎么用
之前如果我们需要抽离一些重复的逻辑,就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件,你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难度,并且也很难实现共享状态。
小生方勤
2019/06/26
1.1K0
相关推荐
让你 React 组件水平暴增的 5 个技巧
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验