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

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> 

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

现在我可以将我的数据传递给我的组件作为我的应用程序组件中的道具，但是我认为这会因为两个原因而效率低下。

1. 我必须在呈现我的App组件之前获取我所有路线的数据。
2. 我的数据会变成“陈旧”，直到我重新呈现我的应用程序组件。

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

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

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

任何建议将不胜感激。

Answer 1

你提到什么

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

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

• 终极版库real world example
• 阵营路由器的核心团队也建议此方法，因为每期here。