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

Question

基本上，从 API 请求中，我有一个包含目录的数组，其中包含可以收藏的项目列表。 我使用三个带有钩子的主要 React 组件来展示它们：

• Live发出 API 请求，将目录存储在 state 中，一次显示一个Catalog
• 接收项目作为道具和句柄的Catalog handleFavorite并显示Item列表
• 接收一个Item作为道具和handleFavorite并显示一个喜欢或不喜欢按钮的项目

有什么方法可以使用钩子修改Catalog组件中单个项目的favorited属性？ 否则，由于目录存储在Live组件中的 state 中，这是否意味着每次我必须更新一个目录中的一个项目时，我都必须重新创建整个目录数组？

所有目录中可能有几千个项目组合，所以这似乎不是处理这个问题的好方法。 我也想过useContext但这似乎不是它的意思。

Answer 1

在Catalog组件中，您可以使用useMemo 。 我来自反应官方 web 网站。

useMemo 只会在依赖项之一发生更改时重新计算记忆值。 这种优化有助于避免在每次渲染时进行昂贵的计算。

在此处阅读有关 useMemo 的更多信息。