问题标签 [react-memo]

我尝试使用React.memo()来防止在我的一个组件上重新渲染，但只要其Parent Component发生更改，它就会继续重新渲染。

这是我的带有 React.memo() 的子组件

这是它被调用的地方。每当我单击Add按钮时，它都会调用状态函数 setModal(true)，Transactions 组件正在重新渲染

我是 React 新手，一直在探索/创建更广泛的项目。任何想法为什么它会继续重新渲染？谢谢！

我有useMemo当它的一个依赖项是Object我从服务器获得的，所以即使对象的内容是相同的 -useMemo因为对象本身每次都不同，所以在每次从服务器同步中一遍又一遍地调用它，当然 和 也是一样useCallback的React.memo。

我该如何解决这个问题？

我正在考虑手动检查新结果是否与以前的结果具有相同的内容，如果确实如此 - 保留以前的对象引用。

我的 React 代码中有以下结构：

如您所见：

• Child组件不消耗 SomeContext
• Child组件仅用 SomeContextProvider 包装（这是否意味着孩子正在使用上下文？）

这是场景：

• 重新Parent渲染时，Child即使Child不消耗SomeContext并propsAreEqual返回，也会重新渲染true。
• 当我移动Child到外部范围时，React.memo按预期工作并防止重新渲染Child何时Parent重新渲染。

为什么Child在不消耗上下文的情况下重新渲染？不React.memo应该防止重新渲染吗？我想念这些概念的什么？

大家好，我有一个关于 React.memo 的问题。我不知道如何解释我的问题，但我会尝试......现在我正在使用 React-Beautiful-dnd 制作我的看板。

DragDropContext => Dropable(board) => Dragable(board) => Dropable(item) => Dragable(item)

ITEM 中的 React.memo 运行良好。

但在董事会它不起作用我不知道为什么

//原子

})

我正在尝试使用 FlatList 在 React Native 中实现分页。我遵循了最佳实践，但我仍然收到以下错误：

VirtualizedList：您有一个更新缓慢的大型列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等。 Object { "contentLength": 23651.732421875, "dt": 1394, "prevDt" : 865, }

这是代码：

正如许多其他帖子所建议的那样，我已经使用memo并移动了renderItem功能组件的外部。仍然没有运气。谢谢您的帮助！

更新：

问题是由于有条件地渲染ListFooterComponent（即ListFooterComponent={hasMoreToFetch && <ActivityIndicator animating={isLoadingMore} />}）。更改它以ListFooterComponent={<ActivityIndicator animating={isLoadingMore} />解决问题。@parse 已经打开了一个问题（请参阅下面的评论），可以在这里找到。

我有一个关于在创建一个在所有重新渲染中保持不变的函数时使用哪个钩子的问题。下面我提供了一个简单的例子。

'Submit1' 包含在 useCallback 中，而 'Submit2' 包含在 useRef 中。两者都给出了预期的结果，因为它们可以防止“HelloWorld”组件不必要地重新渲染。在这种情况下，哪种钩子最合适？

作为 React 的新手，重新渲染组件似乎是不应该做的事情。因此，例如，如果我想创建一个遵循此架构的菜单 : Appis parent of Menu，它具有map创建MenuItem组件的功能

• 菜单项来自数据源（这里是const data）
• 当我单击 a 时MenuItem，它会使用所选MenuItem值更新状态

现在很好，除了所有组件都被重新渲染（见于各种console.log）

这是代码：

应用程序

菜单

菜单项

如您所见，我React.memo最后使用了，MenuItem但它不起作用，以及PureComponent

如果有人有想法，最好有一些建议。

祝你有美好的一天

记忆前

去年我的应用程序非常慢，在 DOM 上渲染元素需要几秒钟。我看到有不必要的渲染，性能很差。

记忆后

我已经使用React.memo、useCallback和useMemo优化了我的大部分组件、处理程序和计算，这消除了不必要的渲染，并且提高了性能。现在，随着时间的推移，我的应用程序不断增长，我主要记住了所有减少不必要渲染的内容，但我的应用程序再次变得缓慢。

我读到过多的记忆是有问题的，因为它会消耗大量的内存。现在我很困惑我们应该考虑内存还是渲染次数？

我尝试使用 Falemgraph，发现我的一些组件需要一些时间，它说一些钩子发生了变化，但没有告诉哪个钩子它显示了一些数字而不是名称，也是因为我的组件被记忆了吗？

有什么工具可以帮助找出记忆的内存量吗？我想在删除某些组件的记忆后查看内存大小并检查是否有任何改进。

使用 Redux 和 react-query，我的 redux 存储有 3-4 级嵌套的大型对象。我检查了原始对象及其大约 64k 行。这会产生任何问题吗？