问题标签 [react-memo]

我知道有很多关于 React.memo() 的问题。
但就像我之前读到的那样，没有明确的规则。这取决于情况。
我也读过，当道具经常变化时，React.memo 可能是值得的。

所以输入对我来说是一个特例。在表单中，您有一个状态，其属性可能与输入一样多。这些输入在您写入它们时经常更改（道具更改），但是当您写入其他输入时，最好将其保持缓存，因为 Form 正在重新呈现。其余的输入道具永远不会改变。

那么我们应该使用 React 备忘录来缓存输入吗？即使你在上面写，它应该尽可能快？

当其中一项发生更改时，我的 FlatListrenderItem正在重新渲染每个项目。
在做了一些调试之后，我对保存项目 (+ React.memo) 的状态变量进行了深度克隆，它现在工作正常，但不确定它是否是最佳解决方案。

小吃： https ://snack.expo.io/-419PhiUl

应用程序.js

项目.js

我在下面有一个图表和一个输入字段。基本上用户可以提出问题，图表会相应地改变。这是它的样子

这是下面的代码示例（忽略 CoreUI 语法）

这就是我定义我的状态的方式

我怀疑这部分代码的问题

我什至尝试添加useCallback这样的onChange功能

但没有帮助。我什至读过memo但不确定在哪里或如何在我的情况下应用它。我究竟做错了什么？

观察

如前所述@Matthew，箭头语法每次都会创建一个不同的回调，这有助于重新渲染，因此必须删除。

但即使在删除它之后，每次按下一个键时图表都会重新呈现。我正在使用Chartjswhich在canvas内部使用。有Chartjs问题吗？

我正在创建一个类似于 netflix 的应用程序。我有以下用例：

当用户仅单击一张卡并且只需要更新该卡时，如何防止重新渲染所有电影？

我正在尝试使用 来提高具有可变项目的长列表的性能React.memo，但我遇到了奇怪的行为。

重现步骤：

1 - 转到此处的沙箱

2 - 在第一个项目上按添加

3 - 在第二个项目上按添加

我有一个自定义钩子，它从我的 graphql 服务器获取一些基本的用户配置文件数据。它被许多组件调用以访问该数据。现在它似乎正在导致重新渲染，因为每次调用它都会再次获取该数据。我应该如何最好地在这个钩子中缓存这些数据？useCustomQuery是从我的 gql 客户端导入的。

我有两个 React 功能组件：C1和C2. C2嵌套在里面C1：

CodePen在这里。

问题

我知道一个组件在不同的情况下会被重新渲染。其中之一是父级重新渲染。

这就是为什么我在C2. "C2 Render"但是每次单击按钮时，我仍然可以看到控制台显示。

为什么？

我在平面列表中有一个联系人列表，我制作了一个随机颜色生成器函数，它将为带有用户名字缩写的联系人个人资料图像占位符生成随机背景颜色。我在列表中添加了一个删除按钮，以便用户可以删除特定的联系人。如果用户按下删除按钮，我已经制作了一个自定义弹出对话框来要求确认。我正在从本地领域数据库中获取列表。

现在的问题是，当我单击删除按钮时，它会重新呈现整个列表，每次单击删除按钮时，用户图像占位符的背景颜色都会发生变化。但是预期的行为应该是当我单击删除按钮时，我的自定义弹出窗口将出现，如果用户确认删除，则列表可以重新呈现，但只需单击删除按钮即可重新呈现。我不熟悉反应备忘录。我尝试在 generateRandomColor 函数甚至自定义弹出窗口上应用它，但没有任何效果。下面是我的原始代码。有人，请帮助，我在过去的两天里被困住了。

联系人列表代码如下：-

自定义对话框组件代码如下：-

我已经对文本进行了拆分。现在我想将它进一步拆分为单个字母/字符。此外，我想将拆分过程扩展到内容内部的一组数组。

下面是我的反应代码：

试图将 DefaultLayout 组件设置为初始状态值。它抛出无法解构未定义的属性子项。

如果我将 DefaultLayout 组件包装在 React.memo 中，它可以正常工作，即导出默认 React.memo(DefaultLayout)

任何人都可以解释这种行为的原因。

请找到沙盒链接

https://codesandbox.io/s/autumn-firefly-qp5gh?file=/pages/index.js

布局.js

appComponentConfig.js

DefaultLayout.js

_app.js