在包含相同组件

Question

基本上，我想在每次用户导航到不同标签时获取最新数据。例如，我有客户的摘要页面和详细信息页面，它们都包含相同的客户容器组件。我正在componentDidMount函数中进行初始提取，因为组件停留在DOM中，所以在路由更改时不会触发该函数。组件必然也不会收到新的道具。

一种解决方案是自定义路由器链接，并根据href调度获取操作，但我很确定这是一种反模式，因为它使代码复杂化，难以维护，混合关注点，如果目标路线不包含该组件，则可能导致双重提取。

React是否提供了允许我单独响应导航事件来获取的任何生命周期钩子或机制？

我使用的是React-router-component和Redux。

Answer 1

据我所知，两个标签碰巧包含相同的组件，因此React重新使用DOM并且没有创建新的组件实例，对吧？

您可以使用React的特殊key道具来强制React替换特定实例。

E.g：

<div className="tab-content>
  <div key="tab-1" className="shared-component-across-tabs">
    shared-component-across-tabs
  </div>
</div>

在第二个标签中，您使用key="tab-2"。

否则您的路由处理程序组件将从路由器接收props.location.pathname。您还可以实现componentWillReceiveProps并检查路径名是否已更改，并在这种情况下重新获取数据。