如何在不重新创建React整个列表的情况下更新项目

时间:2020-07-24 18:48:35

标签: javascript reactjs react-hooks

基本上,从API请求开始,我有一个包含目录的数组,该目录包含可以收藏的项目列表。 我使用带有钩子的三个主要React组件来显示它们:

  • Live发出API请求,将目录存储为状态,并一次显示一个Catalog
  • Catalog,用于接收道具和handleFavorite函数,并显示Item列表
  • Item,它会接收道具道具和handleFavorite函数,并显示一个 like dislike 按钮

我是否可以使用钩子修改favorited组件中单个项目的Catalog属性?否则,由于目录以状态存储在Live组件中,这是否意味着每次必须更新一个目录中的一项时,都必须重新创建整个目录数组吗?

在所有目录中可能有数千个项目组合在一起,因此这似乎不是处理该问题的好方法。我还考虑过useContext,但这似乎并不是它的意思。

1 个答案:

答案 0 :(得分:1)

Catalog组件中,您可以使用useMemo。我从React官方网站上退出。

useMemo仅在其中一个依赖项已更改时才重新计算存储的值。这种优化有助于避免对每个渲染进行昂贵的计算。

详细了解useMemo here

相关问题