时间戳

首页 > 解决方案 > 响应子组件的更新状态

reactjs - 响应子组件的更新状态

问题描述

我的应用程序结构如下：

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

App有一个名为allItems,的状态元素，SelectItems用于将其缩小到App.state.selectedItems。这些选项卡的工作方式是在给定时间仅显示一个选项卡，它是来自React-Bootstrap.

和显示数据依赖于Window1，数据（我们称之为和）是通过计算密集型 api 调用获得的。这就是问题所在。在 React 中思考时，最简洁的方法是“拉起状态”，以便每当更改时更新，然后将数据存储在状态中并传递到选项卡。然而，这是低效的，因为在给定时间只有一个显示，所以我在浪费时间更新我从未显示的数据。在我的实际应用程序中，我有很多标签，所以这是一个真正的问题。Window2selectedItemsdata1data2data1data2AppselectedItemsAppWindow

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

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

谢谢！

标签： reactjs

解决方案

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

Redux 将允许您将所有数据保存在单独的“存储”中。然后，您可以从您的组件连接到商店并访问与它们相关的数据。这些组件只应在它们感兴趣的数据发生更改时更新，对存储的任何其他更改都将被忽略。你可以在网上找到很多关于同时使用 Redux 和 React 的很好的教程——显然egghead 上的教程非常好，你可以试试这个入门。

您的另一个选择可能是使用 a PureComponent，以便您可以将组件重新渲染的时间限制为仅在其道具或状态更改时而不是父级重新渲染时。您可以在此处阅读相关内容。它实际上与前面的解决方案类似，react-redux库提供的连接函数以连接到 Redux 存储，将您的组件包装在 PureComponent 中。

推荐阅读