与大量项目反应状态

时间:2019-03-19 16:15:53

标签: reactjs performance state

我需要保持大量物品的状态。

考虑

this.setState(oldState => ({
    items: [...oldState.items ...newItems]
}))

它会创建一个新数组并将所有项目复制到此处,这很慢。

添加项目的高效方法是将其推入旧列表,但这需要直接更改状态,这可能会或可能不会导致奇怪的错误。

最近我进入了使用这样的状态:

this.setState({
    ["items"+num]: newItems
})

例如,if num==8,那么我们将在字典“ items8”中创建一个新键,并将其值设置为等于新项的数组。

我假设在这种情况下,反应会改变状态以添加新的键值对(与创建新的状态对象相对)。另外,我假设React会将 reference 传递给原始数组,而不是复制数组。

这是将React状态与大量项目结合使用的一种有效方式吗?出于这个问题的目的,让我们假设我没有向DOM渲染任何东西。

编辑:有人要求我在评论中提供更多背景信息。我正在研究开源无限滚动实现。这不是出于任何特定目的。我的数据是图片,我的元数据仅包含图片和图片缩略图的网址。但是,使用我的无限滚动实现的人可能会将其用于其他目的,例如博客帖子,视频或任何其他类型的项目。总体思路是,随着用户向下滚动,我们将获取更多项目的元数据,并希望将其添加到状态中。因此,如果有人快速滚动,他们每秒可能会导致许多状态更改,即使状态中有很多项目,我也希望这些状态更改能够快速进行。

0 个答案:

没有答案