javascript - 如何绕过嵌套元素重新渲染卡片？

Question

我创建了一个移动应用程序。它有一个包含产品列表的卡片列表。最初，产品包含不完整的信息。我们将有一个减速器 - **卡**。在其中，初始状态将是这样的：

state = {};

当我们进入移动应用程序时，我们将卡片与商品拉在一起，然后我们的状态转换为：

state = {
    flowers: [
        {
            id: 1,
            name: "Rose"
        },
        {
            id: 2,
            name: "Cactus"
        }
    ],
    …
}

当我单击产品时，例如“Rose”，我会从 API 响应中获得有关该产品的更多信息。现在我们的状态看起来像这样：

state = {
    flowers: [
        {
            id: 1,
            name: "Rose",
            color: "red"
        },
        {
            id: 2,
            name: "Cactus",
        }
    ],
    …
}

在我以我们的 reducer 的状态编写它之后，我们有一个重新渲染屏幕，这些卡所在的位置。

问题：

当我只更改某张卡中的一个产品时，我重新渲染了所有卡和所有产品，尽管一张卡中只有一个产品发生了变化。当在 reducer 中触发更改状态时，我将新状态返回为 {... state, ... payload}。在有效载荷中，我通过：

flowers: [
    {
        id: 1,
        name: "Rose",
        color: "red"
    },
    {
        id: 2,
        name: "Cactus",
    }
],

我们的数据在变化，所以我们重新渲染 FlatList。

卡片位于垂直方向的 FlatList 中。项目位于水平方向的 FlatList 中。

问题：

我知道为了让我们更改 FlatList，我们需要将新数据传输到它。但是是否有可能以某种方式避免重新渲染所有卡片和所有未更改的产品。毕竟，如果它们会很多，那么这将导致FPS的强烈下沉。

标签： javascriptreact-nativereduxredux-sagareact-native-flatlist