反映子组件的更新状态

Question

我的应用程序结构如下：

<App>
    <SelectItems/>
    <Tabs>
        <Tab> <Window1> </Tab>
        <Tab> <Window2> </Tab>
    </Tabs>
</App>

App有一个名为allItems的州元素，SelectItems用于将其缩小到App.state.selectedItems。这些标签的工作方式是，只有一个标签在给定时间显示，它是来自React-Bootstrap的组件。

Window1和Window2显示取决于selectedItems的数据，数据（我们称之为data1和data2）是通过计算获得的密集的api电话。这是问题所在。在React中思考的最简洁方法是“拉动状态”，以便data1和data2在App更改时从selectedItems更新，并且然后将数据存储在App状态并传递给选项卡。然而这是低效的，因为在给定时间只显示一个Window，所以我浪费时间更新我从未显示的数据。在我的实际应用中，我有很多标签，所以这是一个真正的问题。

解决这个问题的方法是什么？我希望Window在App.state.selection发生变化时更新，我看了static getDerivedStateFromProps(props, state)但看起来（但我不确定）这个函数不起作用，因为状态更新将是异步的，因为它需要API调用。

在这种情况下是否可以使用一般策略？

谢谢！

Answer 1

您有几个选项，第一个是大多数人会推荐的选项（因为它是一个受欢迎的选项），那就是使用Redux来管理您的应用程序状态。

Redux允许您将所有数据保存在一个单独的商店＆＃34;中。然后，您可以从组件连接到商店并访问与其相关的数据。这些组件只应在他们感兴趣的数据发生更改时更新，对商店的任何其他更改都将被忽略。 有很多关于使用Redux和React的好教程，你可以在网上找到 - 显然egghead上的那些非常好，你可以尝试this one开始。

您的另一个选择可能是使用PureComponent，这样您就可以限制组件重新呈现的时间，只有当它的道具或状态发生变化时才会重新呈现，而不是父母重新渲染。你可以阅读这个here。实际上与前一个解决方案类似的是react-redux库提供的连接功能，用于连接到Redux存储，将组件包装在PureComponent中。