时间戳

首页 > 解决方案 > 为什么大型平面列表很慢？如何使用 shouldComponentUpdate？

reactjs - 为什么大型平面列表很慢？如何使用 shouldComponentUpdate？

问题描述

我只是想确认我有这个权利。

我的理解是，没有 pureComponent 的 react native 中的长平面列表将更新列表中每个对象的状态。因此，如果您有一个水平平面列表：

array = [A, B, C, D, E]

with a horizontal flatlist rendered to look like:

A | B | C | D | E

然后，即使 AD 的状态没有任何变化，但页面 E 中的一件事发生了变化，每个页面都会被更新。

我的理解是 PureComponent 通过对数组进行浅层比较以查看是否有任何更改来克服这一点，并且只有在发生更改时，例如 E 变为 F，然后才更新该特定页面。

如果这是正确的，那么您如何克服对嵌套数组的深度更改？

例如：

array = [ [1,2,3], [4,5,6], [7,8,9] ]

在上述情况下，如果我将 array[2][2] 更改为 10 而不是 9，PureComponent 会忽略这一点，因为它只进行浅比较。所以我现在在我的应用程序中所做的是 this.forceUpdate()，但我相信这会导致每个页面的重新呈现。那么我如何在没有 forceUpdate 的情况下使用 PureComponent 呢？我认为是通过shouldComponentUpdate，但是idk。请记住，我不能将数据结构更改为嵌套数组以外的其他内容。

标签： reactjsreact-native

解决方案

最好附上代码。

对于 flatlist 性能，您必须对数据进行分页，并且当用户滚动时，您需要为其提供更多数据

要更新平面列表，请使用分配 this.state 并将其数据更新为平面列表成员。

<FlatList
extraData={this.state}
/>

如果您将 PureComponent 用于您的 flatList 成员，它可能不会更新。我个人发送事件以仅更新特定成员以减少所需的更新过程，但为了快速修复，您可以将您的项目改为组件。

推荐阅读