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中触发改变状态的触发器时，我将新状态返回为{... state，... payload}。在有效载荷中，我通过了：

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

我们的数据在变化，因此我们重新渲染FlatList。

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

问题：

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

如何避开带有嵌套元素的重新渲染卡？

0 个答案: