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组件传递给我的组件，但我认为这样做效率很低，原因有两个。

在渲染我的App组件之前，我必须获取所有路由的数据。
在我重新渲染我的App组件之前，我的数据将变得“陈旧”。

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

我目前遇到的是，在客户端更改我的应用程序重新渲染后，但由于我的当前页面已经安装，因此无法获取新的客户端数据。但是如果我离开当前页面然后返回页面，一切都按预期工作。

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

任何建议都将不胜感激。

Answer 1

您提到的

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

非常好。在野外这种模式的例子很少：

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

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

1 个答案: