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

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

示例架构

<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>

...
...

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

现在我可以将数据作为道具从我的应用程序组件传递到我的组件，但我认为这样做效率低下，原因有两个

在呈现我的应用程序组件之前，我必须获取所有路由的数据

我的数据将变得“陈旧”，直到我重新呈现我的应用程序组件

由于这些原因，我决定让每个页面使用

组件willmount

生命周期挂钩获取自己的数据，并将数据作为道具传递给页面子组件。这对我来说很有用，因为我能够在导航时获取每个页面的新数据

我目前所经历的是，在客户端更改后，我的应用程序重新呈现，但由于我的当前页面已经挂载，它不会获取新的客户端数据。但是，如果我离开当前页面，然后返回到该页面，则一切正常

我想到的一个解决方案是将用户数据向下传递到每个页面，并使用

组件willreceiveprops

生命周期挂钩并执行比较检查以获取新数据。我希望尽可能避免这种情况，因为我的申请将有40多页

---

如果您有任何建议，我们将不胜感激。

您所提到的

将用户数据向下传递到每个页面并使用

组件将接收props

生命周期挂钩并执行比较 检查以获取新数据

很好。在野外这种模式的几个例子：

• Redux存储库
• React路由器核心团队也根据问题推荐此方法

  ---

我知道这种模式是有效的，但除了必须将

组件WillReceiveProps

生命周期挂钩添加到每个页面之外，我还必须手动将应用程序组件状态映射到页面布局和页面。这将需要我使用类似这样的东西

{React.cloneElement（this.props.children，{user:this.state.user}}

。在我看来，这开始影响可维护性，也可能意味着可能会有更好的方法。由