问题标签 [react-memo]

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

我们有一个子组件列表，每个子组件称为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未更改的组件？

需要帮助~

我有两个组件，我用 React.memo 包裹了 Parent：

孩子

家长

在应用程序中使用：

点击按钮，结果：

父组件将重新渲染，因此备忘录不起作用，因为它的子组件是一个函数组件

那么，如何防止重新渲染？

我知道一种通过useMemo解决的方法，但是它丑陋且不友好，您有更好的想法吗？

我不想在某些路径上重新渲染我的组件，尝试使用 React.memo 执行此操作并使用 withRouter HOC 检查当前路径。

React.memo 中的比较函数不会被调用。

两者React.memo和useMemo钩子都可以通过减少重新计算和重新渲染来优化性能。但是，它们确实有效，因为 React.memo 用于包装功能组件，并且useMemo钩子几乎可以用于任何功能，甚至是纯计算。更重要的useMemo是，通常从父组件调用到子组件，而React.memo通常在子组件本身的声明上调用。

虽然两者都有不同的优点，但一个优点React.memo是不必从每个父子关系中调用它。然而，随着 hooks 的发布，React 开发显然希望转向使用 hooks 来处理状态、副作用事件和其他效果的功能组件。虽然我认为 React 开发团队不会有勇气或无视他们的用户群React.memo在未来 2 年的任何时候删除，但我想知道他们是否希望最终用户出于文体原因停止使用 React.memo。就像他们被动地从类组件中移开，转而使用带有钩子的功能组件一样。

当使用带有钩子的功能组件时，反应框架是否正在远离React.memo？如果将来想跟上 React 的最佳实践，习惯使用 hook 版本会更好吗？

这是我的导航栏组件。导出一个记忆的。

使用导航栏的标题。

当我单击 HambugerButton 时，出现以下错误：

如果我不使用 Memoized 组件，它工作得很好。

有什么问题？

我正在尝试使用手动道具比较的 React 备忘录功能优化我的 React 列表渲染。我生成了一个简单的“切换”按钮列表：

这是“切换”按钮：

我的问题是列表对象实际上没有存储预期值。每次单击按钮时，我都会得到相同的默认按钮（在of{ a: true, b: true, c: true }中可见），但是如果我删除该功能，一切都会再次正常工作，并且列表对象会按应有的方式更新。console.loghandleClickareEqual

代码沙箱示例

编辑：

我看到如果我将整个内容更改为一个数组并将每个按钮包装到一个对象中，备忘录功能就会按预期工作。

带数组的代码沙箱示例

我使用 React.memo 来控制重新渲染，但我的组件仍然重新渲染。我的代码是这样的：

在我的模板组件中：

在我的上传器组件中：

当我在选择组件中更改值时，areEqual 似乎不起作用，上传组件中所有图像的地址将重新加载。为什么...？

像这样的表现：

我能怎么做？

我有一个用 React.memo 包装的 React 功能组件，如下所示

当我调用这个组件时，我会这样做

假设我的 prop1 在渲染之间确实发生了变化，上面的代码按预期工作，这意味着 React.memo 创建了一个新副本并且不使用它的缓存版本。

问题是如果我没有明确地将 prop1 作为单独的参数传递，React.memo 缓存版本不会识别记录的属性已更改。

有没有办法不必传入这个冗余属性来让 React.memo 重新计算？

这感觉像是一个深/浅的复制问题，但我不确定。

我正在尝试克隆 netflix，当我将鼠标悬停在电影图像上时，会出现该电影的预告片，当我将鼠标悬停在控制台中有许多相同的输出时，就会出现问题。我认为这个问题是因为我在地图内渲染，但我正在寻找避免这种情况的性能......我尝试使用 React.memo 但不起作用。

这是一个例子

我有一个父组件

在子组件内部，我有以下内容

有人有想法吗？我将不胜感激任何帮助

我正在通过一个数组进行映射，该数组为数组中的每个项目返回 JSX 组件。在运行时我想传递值。如果它们与单个项目的值匹配，则它们的单个组件将被修改。

我试图找到一种方法来实现这一点，而无需重新渲染所有组件，目前发生这种情况是因为道具发生了变化

我曾尝试在类组件中使用shouldComponentUpdate，但似乎这样我只能将 prevState 和 prevProps 与相应的更改进行比较。我在 Map 函数中进一步考虑了 useMemo，它不起作用，因为它嵌套在 map 函数中。

父组件：

子组件：