问题标签 [usecallback]

将回调传递给组件时，我应该使用useCallback钩子返回一个记忆化的回调（以防止不需要的渲染）：

但是如果我使用地图呢？例如：

我应该如何正确使用useCallback？以上是传递多个回调的正确方法吗？它真的有效并且知道根据数组的一项来记忆每个回调吗？

据我所知，在 React 的功能组件中定义的函数会在组件重新呈现时重新生成。由于 useCallback 可以由特定的依赖项触发，因此可以防止不必要地重新生成这些函数。我应该将它们中的每一个都包装在 useCallback 中，并传递相关的依赖项吗？

我想开始讨论创建回调的推荐方法，该回调从循环内创建的组件中获取参数。

例如，如果我正在填充将具有“删除”按钮的项目列表，我希望“onDeleteItem”回调知道要删除的项目的索引。所以是这样的：

但是这样做的问题是 onDeleteItem 总是会向 onClick 处理程序返回一个新函数，从而导致重新呈现按钮，即使列表没有更改也是如此。所以它违背了useCallback.

我想出了我自己的钩子，我称之为useLoopCallback，它通过将主回调以及循环参数映射到他们自己的回调来解决问题：

所以现在上面的处理程序看起来像这样：

这很好，但现在我想知道这个额外的逻辑是否真的让事情变得更快或者只是增加了不必要的开销。谁能提供一些见解？

编辑： 上述方法的替代方法是将列表项包装在它们自己的组件中。所以是这样的：

我正在查看 React 源代码，特别是useCallback实现。据我了解，缓存大小useCallback为 1。在mountCallback我们初始化hook.memoizedState一个数组，其中第一个元素是callback- 的第一个参数useCallback。如果updateCallback依赖项没有改变，那么我们返回hook.memoizedState数组的第一个元素。因为callback' 的引用没有改变，所以不会重新渲染。反之，如果依赖关系发生变化，我们将hook.memoizedState数组的第一个元素设置为then引用的callback参数，就会发生变化（因为函数对象的参数总是有一个新值），从而触发重新渲染。updateCallbackcallback

所以缓存useCallback是基于callback的引用。我的理解正确吗？

这篇博文和官方文档展示了如何使用useCallback来创建回调 ref。

但是没有一个例子useCallback有依赖关系的例子。

我应该如何设置？

例如，如果我执行以下操作，它将不起作用，因为每当myDependency更改时回调将被触发而无需任何参数。

addEventListener我有一个组件，它通过和在多个地方使用事件侦听器removeEventListener。使用组件方法是不够的，onMouseMove因为我还需要检测组件之外的事件。

我在组件中使用了钩子，其中一些在末尾有依赖数组，特别是useCallback(eventFunction, dependencies)与侦听器一起使用的事件函数。依赖项通常是使用声明的有状态变量useState。

据我所知，函数的标识在 中很重要add/remove EventListener，因此如果函数之间发生变化，它就不起作用。起初我尝试管理钩子，以便事件函数不会在和之间更改身份add，remove但由于函数对状态的依赖，这很快变得笨拙。

所以最后我想出了以下模式：由于 setter 函数（ 的第二个输入参数useState）获取当前状态作为参数，我可以拥有在第一次渲染后永远不会改变的事件函数（我们仍然称这个 mount ?) 但仍然可以访问最新的状态变量。一个例子：

（这是一个非常简化的插图）。

这似乎工作正常，但我不确定它是否感觉很正确 - 使用永远不会改变状态但只是作为访问当前状态的黑客的 setter 函数。

此外，对于需要多个状态变量的事件函数，我必须嵌套 setter 调用。

是否有另一种模式可以更好地处理这种情况？

由于我的 currentUser 状态变量是在 useEffect 中设置的，并且 getJoinRoom 需要 currentUser 所以我在 getJoinRoom 上设置 useCallback 并具有依赖 currentUser 状态，但似乎在调用 getJoinRoom 时仍没有设置 currentUser

连接 TypeError 错误：无法读取未定义的属性“getJoinableRooms”

我正在按照本教程演示 react 的“useCallback”钩子以及 React.memo，以防止不必要地渲染函数。为了证明这个概念，我们使用 useRef 来控制渲染的数量。这仅适用于该功能，但我添加了一个随机化按钮背景颜色的功能，我似乎无法阻止这两个功能的呈现。

继有关 React Hooks 的 Scrimba 教程之后，我一直在尝试使用，useEffect以及useCallback防止组件在 requestAnimationFrame 期间重新渲染的方法。我目前有一个Playground更新和渲染count状态的组件和一个<Calculate />计算渲染次数的子组件。

下面，我正在使用 useCallback ，它似乎正在工作。有谁知道返回函数是否​​在 useCallback 挂钩中工作以清理 requestAnimationframe，就像在 useEffect 挂钩中一样？我在下面的代码中使用了它，但不确定如何检查“cancelAnimationFrame”是否正在实施？

我最近正在使用 React Hooks 重构一个 Web 应用程序。我遇到一个关于useCallback. 基于 Kent 的描述：https ://kentcdodds.com/blog/usememo-and-usecallback ，useCallback就是将相同的函数引用传递给子组件，避免子组件的重新渲染，从而使性能更好. 但是，它与React.memo. 正如肯特所说：

大多数情况下，您不应该费心优化不必要的渲染。React 非常快，我可以想到很多事情可以让你用你的时间去做，这比优化这样的事情要好。事实上，用我将要展示给你的东西来优化东西的需求是如此罕见，以至于我实际上从来不需要这样做......

所以，我的问题是：我是否有权声称我们不需要经常使用useCallback？除非回调的创建成本很高，否则 using 会useCallback避免为每个渲染重新创建回调。

比如说，对于一个onClick或onChange事件处理程序，2 行或更少，我们应该不使用useCallback它来包装它吗？