问题标签 [react-memo]

我正在使用带有 Jest 的 React 测试库来测试我的组件。其中一个组件使用数据呈现表格，因此我决定按照表格库作者的建议使用 React.memo。我这样使用它：

但是当我看到测试覆盖率时，我的测试没有覆盖 memo() 回调：

有没有办法在渲染后更改道具，以便我可以完成对这个记忆化组件的测试？谢谢！

我有一个记忆功能组件。父库组件渲染后，react 调用 update memo 组件检查我的 func. 组件需要再次渲染。比较“current.ref === workInProgress.ref”失败并导致我的功能组件重新呈现。

“current.ref === workInProgress.ref”比较是什么意思？你能建议我好的医生来理解这一点吗？TIA

对，所以我有一个体育应用程序，我只显示每个团队的赛程，如下所示：

我正在为上面的每个团队显示徽标的图像，并且我注意到闪烁以及该组件何时呈现。它呈现在顶部导航视图中。即我单击导航栏中的固定装置，它会显示该组件。

我不喜欢闪烁，所以我试图让它更高效，并决定使用 react.memo

我将上面的内容包裹在 React.memo 中，如下所示：

但由于某种原因，它没有在组件呈现时记录 console.log，但它确实记录了顶部的行：console.log('rendering again').

为什么不记录？我能做些什么来防止每次渲染时出现这种闪烁？我只想显示灯具，而不是它闪烁，闪烁然后显示它们（在第一次渲染时可能没问题，但不是在随后的每个渲染中）

因为我的应用程序在两个不同的组件中处理移动和桌面视图，所以我需要使用useContext API在它们之间分配状态/道具。

我有一个地图组件，在从移动设备移动到桌面设备时，地图会刷新，反之亦然。

根据有关 React 备忘录的 React 文档：

如果您的组件在给定相同的 props 的情况下呈现相同的结果，您可以将其包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

所以一开始我的想法是“为什么我不记住zoom地图的当前道具？” 因为当一个不同的断点被命中（从移动或桌面和 vv 中）它会导致重新渲染。

但后来我在上一段的正下方读到了这个：

React.memo 仅检查 prop 更改。如果你封装在 React.memo 中的函数组件在其实现中有一个 useState 或 useContext Hook，它仍然会在状态或上下文发生变化时重新渲染。

然而在那之下有这个！

默认情况下，它只会对 props 对象中的复杂对象进行浅层比较。如果要控制比较，还可以提供自定义比较函数作为第二个参数。

此方法仅作为性能优化存在。不要依赖它来“阻止”渲染，因为这可能会导致错误。

所以我还是尝试了它，但首先我使用地图方法获取当前缩放，然后通过useContext和本地存储将其保存，因此当一个人进入移动设备或桌面时，至少用户将获得在地图上输入的最后一个缩放。

如您所见，有轻微的滞后。

所以这是我的实现： Map 函数：

这是仪表板，所以你可以看到我将实际Map作为道具传递给zoom属性：

那么有没有人知道如何在遍历移动设备和桌面之间的断点时保持地图道具/状态完好无损。

我有一个子子组件，它位于父组件的循环内。当子子组件之一正在更新父组件的状态时，它会重新渲染所有子组件，因为它是循环的。我怎样才能避免每次迭代的重新渲染。它应该更新那个特定的子孩子。

当前行为：在上面的代码中，当我单击其中一个子组件中的复选框（它是子子）时，它正在更新父组件状态（selectedChild）。所以循环正在执行，所有子项（所有表行）都在重新渲染。

预期行为：只有那个特定的子孩子必须重新渲染（即使它不应该重新渲染孩子）

演示：https ://codesandbox.io/s/reactqa2-0c0md?file=/src/App.js

小相关问题：如何避免在父组件状态更新时重新渲染所有循环中的子组件

我已经做了 2 天了，无法弄清楚:(

正如您在屏幕截图中看到的那样，我有一个类似树的对话。当一个人在一个空的输入字段中输入内容时，Message 会被添加到 reducer 数组“conversationsData.messages”中。发生这种情况时，每条消息的回复组件只会监听对该消息的约 3 个回复的更改。如果回复发生变化，则回复应重新呈现。Buuut ...问题是每个回复组件，因此每条消息都被重新渲染，这导致了延迟。

你能帮我让备忘录正常工作吗？

ConversationManager/Conversation/Message.tsx

减速器/ConversationsData.ts

接口/消息.ts

我一直在尝试通过在组件上使用 React.memo 来提高渲染性能。它可以正常工作，直到我在作为子项插入的集合中的每个组件上使用它为止。

我在这里准备了小吃

要了解发生了什么，您需要打开控制台，因为显示了一些日志。您将看到WrapperMemo通常呈现子组件（它们也被包裹在一些辅助组件中以检查我稍后会解释的内容）。

当你按下第一个名为SLICE MYNUMBERS的按钮时，你会看到 React.memo 的 isEqual 函数isWrapperEqual返回 true，但它仍然不会停止重新渲染子组件。然而，无论是Wrapper还是所有其他辅助包装组件（ChildOk）都不会被渲染！

当您单击任何PRESS ME:[number]按钮时，它会强制您在仅修改一个子组件时重新渲染其他子组件。

值得一提的是，当按下任何按钮时，TestCompMemo永远不会重新呈现——这是正确的行为。

1）对此有什么解释吗？

2) 有没有办法在集合中的每个组件上使用 React.memo 以仅呈现更改的组件（如Wrapper组件中所示）？

功能组件：

WebStorm 向我显示此错误/警告：

我只是想缓存这个组件，这样当父级更改但传递给NewRestRequestCoreForm不的道具时，NewRestRequestCoreForm不会重新渲染。

该组件的使用方式如下：

我做错了什么，我该如何解决？

编辑：

我只是使用了一个简单的组件，有和没有应用备忘录，即使有警告它也能工作！

最近我发现我的 React 应用程序存在一些性能问题，经过一些研究我发现了 React Memo。一些训练示例作为例外工作，但是当将其连接到我的应用程序时，它没有任何效果。我发现问题出在 useLocation 上。

没有 useLocation 它可以工作，但我需要这个位置，因为基于这个位置，更具体地说，基于来自这个位置的过滤器，我调用 API 数据。就像是

有更好的解决方案或一些提示吗？

我想要做什么

1. 我正在尝试使用一组对象（习惯）并从每个对象中渲染一个“卡片”组件。
2. 现在，对于每张卡片（习惯​​），您可以将该习惯“标记”为已完成，这将更新该卡片的状态。
3. 我使用 React.memo 来防止其他卡片重新渲染。
4. 每当用户将卡片标记为完成时，卡片标题都会更改为“已编辑”

我面临的问题

每当一张卡片被标记为完成时，标题就会改变，但只要任何其他卡片被标记为完成，第一张卡片的状态就会恢复。

我找不到其他面临类似问题的人，有人可以帮忙吗？

这是代码：

注意：这在不使用 React.memo() 包装 Card 组件的情况下可以正常工作。

这是代码和框链接： https ://codesandbox.io/s/winter-water-c2592?file=/src/App.js