问题标签 [usecallback]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
545 浏览

react-native - React Native View onLayout 在儿童高度动画时重新渲染每一帧

要创建自定义ViewtranslateY我必须使用onLayout. 这工作得很好,但今天我添加了一个Accordion也可以动画的组件。这恰好触发onLayout函数在每个计算帧上呈现,这使我的应用程序非常慢。我试过添加useCallbackLayoutAnimation来解决这个问题,但这似乎都不起作用。

有没有办法onLayout在动画之前和之后触发唯一的?我考虑过为onLayout.

0 投票
1 回答
7456 浏览

javascript - 反应 | UseCallBack 内的道具未在自定义挂钩内更新

我已经构建了一个自定义自定义帖子挂钩,它返回 API 响应和 API 帖子。我正在使用useCallback钩子来设置Response state

出错的地方是钩子Package prop内部没有更新。useCallback

Package当我在钩子外登录时,useCallback我会在属性内获得正确的数据。但是,当我记录钩子Package prop内部时useCallback,值Package不会改变。

不管我按了多少次按钮

我已经尝试创建一个state每次Package prop更新时都会更新的订单,但是每当我在其中设置Package为一个值时,scope我都会得到一个无限循环。

我已经添加Package到钩子scopeuseCallback

例子

我期望发生的是,每当我调用我的自定义usePostOrder钩子时Package,它内部的useCallback值总是与最新传递的道具保持同步。

自定义钩子

Jake Luby 的回答 稍作调整

我怎么称呼这个钩子

0 投票
2 回答
896 浏览

reactjs - React Hook useEffect 缺少依赖项:'execute'

尽管尝试了不同的事情,但我似乎无法找到答案。我不断收到错误:

在这个文件上:

TLDR 是我需要fs()每 15 秒或在某些全局状态更改时(由dependency. 我还想捕获数据和任何错误,因此我fs()用几个then()andcatch()块环绕周围。

当我在功能组件中执行以下代码时,它会在顶部给出警告:

知道如何解决这个问题吗?如果这是做这样的事情的正确方法,我是 React useEffect 的新手,而不是 100%?在我的 useEffect 调用中指定execute为依赖项会导致应用程序不断重新渲染。我execute()在调用之前运行,setInterval()因为我希望查询每 15 秒运行一次,并且在组件首次呈现时运行。

有关更多上下文:我正在制作仪表板作为示例项目,并希望每 15 秒或在某些全局状态更改时立即查询多个 api 端点。如果全局状态确实发生了变化,我想将我的 HTTP 轮询从剩下的任何时间重置为 15 秒。

0 投票
2 回答
2550 浏览

reactjs - 我应该在自定义钩子中记住函数吗?

我有计数器组件。我用自定义钩子封装了业务逻辑。我应该通过手段优化功能useCallback吗?如果有input onchange handler,情况会不会一样?

↓</p>

0 投票
1 回答
716 浏览

react-hooks - 为什么`react-hooks/exhaustive-deps` lint 规则会在嵌套对象属性上触发?

我正在尝试使用 React 挂钩来记忆回调。此回调专门使用在对象上定义的函数。

这会触发 eslint 规则react-hooks/exhaustive-deps。它希望我改为通过[field, key]

如果我随后将代码更改为以下代码,即使看起来等效,我也不会收到任何警告:

为什么 eslint 在第一个示例中警告我?在这种情况下我可以放心地忽略它吗?

0 投票
1 回答
1362 浏览

reactjs - 我可以使用 useCallback 或 useMemo 来缓存我的函数的结果吗?

假设组件内部有一个函数,例如:

如果已经使用相同的参数调用了myFunction() ,我不希望再次调用它。在此处添加缓存的最佳做法是什么?

0 投票
1 回答
73 浏览

javascript - ReactJS:去抖一个以状态值作为参数的函数;最好的方法是什么?

我已经访问了这个链接并尝试了一些例子:在 React.js 中执行去抖动

一点上下文:我正在构建一个我想在 NPM 上部署的搜索框。每次用户键入时,onSearch都会调用一个 prop 函数。这允许程序员根据需要获取新数据。

问题:输入的每个字符都会触发 onSearch,但这不是最佳的,所以我想消除它。

我想按照其中一篇文章的建议做:

我的问题是我需要将一个参数传递给“someFunction”,而该参数是一个状态(一个字符串):

经过各种尝试,我终于找到了解决方案。回想过去我是如何消除窗口调整大小事件的,我遵循了或多或少相同的模式。我通过将事件侦听器附加到窗口对象并在调度事件时向事件添加属性来做到这一点。它有效,但它是一个好的解决方案吗?有没有更好的方法来实现这一目标?

然后每次用户类型我调用handleSetSearchString:

0 投票
2 回答
8298 浏览

reactjs - 反应useCallback的useEffect依赖总是触发渲染

我有一个谜。考虑以下自定义 React 钩子,它按时间段获取数据并将结果存储在 a 中Map

被添加为依赖useEffect项时被重复触发。updateData如果我将它排除为依赖项,那么一切都按预期工作/表现,但eslint抱怨我违反了react-hooks/exhaustive-deps

Given updateDatahas been useCallback-ed 我不明白为什么它应该反复触发渲染。任何人都可以解释一下吗?

0 投票
2 回答
1208 浏览

reactjs - 如何在 useCallback 中使用全局对象而不将其作为依赖项(删除警告)

我在使用 Reacts useCallback 钩子时收到了这个警告。

React Hook useCallback 缺少一个依赖项:'history'。要么包含它,要么移除依赖 array.eslint(react-hooks/exhaustive-deps

将历史对象放在 useCallback 依赖参数中会删除警告,但将其作为此方法的依赖项是没有意义的。这个方法不依赖于历史的状态,它只是调用它的方法来更新历史。此外,我怀疑每次历史记录更改时我的父组件都会重新渲染,这违背了使用 useCallback 的目的。

我的问题是如何在我的 useCallback 方法中使用历史对象:

  1. 没有编译器警告(React Hook useCallback 缺少依赖项:'history'。包括它或删除依赖项 array.eslint(react-hooks/exhaustive-deps )
  2. 没有为警告添加忽略语句(// eslint-disable-line react-hooks/exhaustive-deps
  3. 不使用 window.history ,因为使用 useLocation() 钩子不能很好地工作。历史更改事件不会由 window.history 触发。因此,不能按照本文中的示例使用 useEffect 和 useLocation 挂钩:https ://reacttraining.com/blog/react-router-v5-1/?fbclid=IwAR1WHJKKeF0rO_-jW31mRCatWq5o143OvgyURn6R3uGlHNQ_dqs3QQ4ddLs
0 投票
1 回答
2735 浏览

reactjs - React hooks useCallback 依赖于函数

我有以下功能

我的问题是,就我而言,有必要useCallback吗?当依赖项是一个函数时,React 如何确定依赖项是否改变?