问题标签 [usecallback]

根据我从 React 文档和网络上的其他材料中了解到的情况，useCallback 用于通过确保将回调的记忆版本传递给子组件来避免重新渲染子组件，因此子组件的引用属性保持不变。但只有当我在子组件上使用 React.memo 时，所有这些才有效。如果没有 React.memo，子组件无论如何都会重新渲染。我的问题是在这种情况下 useCallback 有什么用，即没有将 React.memo 应用于子组件。useCallback 的其他好处是什么？

我在 material-ui 中有一个<Tabs />组件，它有一个用于更改模式的处理程序。on change 有这个签名（来自链接）：

Signature :
function(event: object, value: any) => void
event: 回调
值的事件源：我们默认为child的索引（数字）

我的实现有点像这样：

我的handleChange函数只是一个围绕类似 useState 的钩子的箭头 fn

为了避免每次都重新创建此箭头 fn，我尝试这样做：

但我注意到，变化最大的东西，新模式不是部门的一部分，因此可能无法正常运行？然后我从我最黑暗的梦境中召唤出这个怪物：

一路回调。

以前，这个问题（React hooks useCallback with parameters inside loop）建议不要useCallback在这种情况下使用。但由于这是可以一遍又一遍地调用的东西，它似乎是这样做的地方。此外useMemo，我想依赖传递给钩子的变量的例子也没有解决，我什至认为它在这个例子中不起作用（例如，我使用错误的钩子，以及不知道如何将它用于我的示例）。

我该如何解决这个问题？

（编辑：事实上，我根本无法嵌套回调/备忘录挂钩。所以最后一个代码示例不起作用，正如我所怀疑的）

我正在学习 ReactJs 中的钩子，并坚持使用某种警告，例如依赖项。在src/pages/home中，我在其中使用了 useCallback。还有一个问题，请您给我未来在我的项目中需要使用 useCallback 和 useMemo 的真实生活条件。意思是，我什么时候应该去 useMemo 什么时候去 useCallback。谢谢。

在传递回调函数时，尤其是传递参数化函数时，我知道应该使用useCallback钩子，因为使用匿名函数会对性能产生不利影响。

我说的匿名函数的例子是这样的。

在将匿名函数转换为使用此钩子的过程中，我遇到了一个错误，提示“渲染过多”或无法正常工作。但我不知道具体在什么情况下，在什么情况下。

我useCallback像下面这样使用。

但是，当使用匿名函数返回时useCallback，它也可以工作。

这意味着像这里的代码。（仅与上面的代码相比有所不同。）

在这种情况下，我想知道useCallback如果我只是使用匿名函数而不是使用这个钩子，是否比在内部使用匿名函数更糟糕。

我正在尝试编写一个自定义的 React 钩子，它返回的函数在每次调用钩子时都保持引用相等。这意味着每次从钩子返回完全相同的函数，以便将它们与===return进行比较true。

我的印象是useCallback钩子是实现这一目标的方法：

所以当这个钩子被调用时，我相信increment每次返回值的属性应该是完全相同的函数。它应该是第一次运行钩子时内联函数的值，并且在钩子的后续执行中不会改变，因为我没有指定与 with 的依赖useCallback关系[]。

但这似乎不是发生的事情！我写了一个测试项目来演示这个问题。这是该测试的症结所在：

为了验证我的测试是否准确，我还编写了一个钩子，它只使用全局范围的对象来维护“内存”，而不是试图让 React 使用useCallback. 这个钩子通过了测试：

我使用useCallback不正确吗？为什么在后续执行useCorrectCallback时在其属性中返回不同的函数？increment

我在 React 官方文档或 blagosphere 上还没有找到任何提及这一点。

我认为当你有多个状态变量时，你可以而且通常应该这样做：

这是允许和鼓励的，而不是使用一个包含字段和useState的无所不包的对象调用一次？如果允许并鼓励它，如何知道它何时被调用是指已经存储还是已经存储？statefoobaruseStatefoobar

我也有基本相同的问题useCallback。我想知道，如果我useCallback在同一个组件中调用两次以创建两个不同的回调，如何useCallback知道我的意思是引用之前定义的函数与创建一个新的函数，如果引用一个已经使用过的函数，它需要返回 memoized版本，它怎么知道两者中的哪一个？特别是如果两个回调具有相同的依赖项列表？

我正在尝试挑战自己，将使用钩子的课程项目转换为同一个项目，但不必使用钩子来了解有关如何使用类组件做事的更多信息。目前，我需要帮助弄清楚如何useCallback在普通类组件中复制钩子。这是它在应用程序中的使用方式。

我了解如何复制其他钩子，例如useStateanduseEffect但我正在努力寻找替代方法的答案useCallback。感谢您为这个问题付出的任何努力。

我试图将问题归结为一个尽可能简单的例子：

我们有一个子组件列表，每个子组件称为NumChoice，每个代表一个数字。NumChoice被包裹在React.memo. 在父组件中，我们有一个布尔数组choices，每个对应一个子组件NumChoice。起初， 的所有元素choices都是false。为了渲染子组件，我们遍历choices，并为每个选择生成相应的子组件NumChoice。chooseDivisibles我们在父组件中定义一个函数，使用useCallback从每个子组件调用的函数NumChoice。chooseDivisibles获取调用者的索引NumChoice并将相应的元素更改为choicesto true。如果NumChoice其对应的元素在choices是true，否则，其背景颜色为“白色”。

完整代码位于： https ://codesandbox.io/s/react-rerender-l4e3c?fontsize=14&hidenavigation=1&theme=dark

包裹NumChoiceinReact.memo和chooseDivisiblesin useCallback，我们希望只重新渲染NumChoice相应元素发生choices变化的组件，但 React 会重新渲染它们。chooseDivisibles被包裹在 中，除了 .useCallback之外没有列出任何依赖项setChoices。此外，NumChoice被包裹起来React.memo，它应该只在指定的道具发生变化时重新渲染，但它们没有变化，并且变化choices不应该对重新渲染有任何影响NumChoice。如果我们排除检查上一个和下一个道具的相等性chooseDivisibles，它会按预期工作，但我认为上一个和下一个的比较chooseDivisibles不应该影响重新渲染NumChoice，因为它被包裹在useCallback并且不依赖于choices. 我们如何防止重新渲染NumChoiceprops未更改的组件？

1）我将处理方法onPaginationChange作为父组件（A）的道具传递给子组件（B）

2) 我使用 useState() 钩子，所以每次调用 setFieldName() 时，父组件都会重新渲染，因此即使未调用处理程序，子组件也会重新渲染。

3）我正在尝试使用 useCallback 挂钩来避免由于父组件的状态更改而重新渲染子组件。但是，我仍然看到子组件根据父组件上的状态更改次数重新渲染了很多次。

这是我的处理函数作为 arg 传递给 useCallback。处理函数接收 2 个 props currentPageNo，pageSize并且我使用 currentPage 作为依赖项。

如果您找到问题的根本原因，请告诉我。

我尝试在子组件中设置回调，但是当调用这个回调函数时，状态没有更新，即处于初始状态。

为什么会这样以及如何解决这个问题？

将回调设置为子级。截屏

回调，截图