根状态更改后重新安装所有反应子组件

Question

我正在构建一个非常大的应用程序，并希望了解基于根组件状态更改重新呈现应用程序的最佳方法。

示例架构

<Route path="/" component={App}>
 <Route component={Layout}>
  <IndexRoute component={Page} />
  <Route path={page} component={Page}></Route>
  ...
 </Route>
 <Route component={Layout}>
  <IndexRoute component={Page} />
  <Route path={page} component={Page}></Route>
  ...
  </Route>

在我成功登录后的架构中，我将用户数据存储在我的 App 组件中。每个用户都有一个客户端密钥，该密钥用作要显示哪些客户端数据库/数据的标识符。我想要完成的行为是在客户端更改后使用新的客户端数据更新我的当前页面。

现在我可以将我的数据作为 App 组件中的 props 传递给我的组件，但我认为这会因为两个原因而效率低下。

1. 在渲染我的 App 组件之前，我必须获取所有路线的数据。
2. 在我重新渲染我的应用组件之前，我的数据会变得“陈旧”。

由于这些原因，我决定让每个页面使用componentWillMount 生命周期挂钩获取它自己的数据，并将数据作为道具传递给页面子组件。这对我有用，因为我能够在导航时为每个页面获取新数据。

我目前遇到的是，在客户端更改后，我的应用程序重新呈现，但由于我当前的页面已经挂载，它不会获取新的客户端数据。但是，如果我离开当前页面然后返回页面，一切都会按预期工作。

我想到的一个解决方案是将用户数据传递到每个页面并使用componentWillReceiveProps 生命周期挂钩并执行比较检查以获取新数据。如果可能的话，我想防止这种情况发生，因为我的应用程序将有 40 多页。

任何建议将不胜感激。

Answer 1

你提到的那些

将用户数据传递到每个页面并使用 componentWillReceiveProps生命周期钩子并进行比较 检查以获取新数据。

完全没问题。在野外这种模式的例子很少：

• Redux 存储库real world example
• React Router 核心团队也根据 issue here 推荐此方法。