Question

我正在努力加快React和Redux的速度。我目前有这样的设置：

商店的州有一个'activeAction'属性，需要一个数字。 Page组件使用'activeAction'来确定它应该在应用程序的中心显示哪个组件，并根据当前URL进行更改。例如，'/ Home'是activeAction：0，'/ About'是activeAction：1

/ Home的组件称为BlogRoll，该组件中包含实际逻辑，用于显示来自blogger api调用的帖子。我正在调用动作来显示组件componentDidMount函数中的帖子。 / About的组件只有一个表示“内容区”的渲染函数......现在只是一个占位符。

我的导航设置为链接组件：

<div className="NavItem">
   <Link to={'/Home'} activeClassName="ActiveMenuItem">Home</Link>
</div>
<div className="NavItem">
   <Link to={'/About'} activeClassName="ActiveMenuItem">About</Link>
</div>

我遇到的问题是在点击Home Link（工作正常）然后点击About Link之后，BlogRoll功能会在转到关于组件之前重新加载。我通过在BlogRoll.componentDidMount()中设置一个断点来了解这一点。我点击进入关于但在此之前它重新加载BlogRoll。

这是故意的行为吗？它似乎不应该这样做，但我仍在学习，可能还没有完全理解组件生命周期。

感谢您的帮助！

Answer 1

这是一种故意的行为。

如果React-router组件未被渲染，则会被卸载。

您可以在react-router repo中了解有关组件生命周期的更多信息。

如果您希望组件中存在持久状态，则可以使用Redux存储。

React-Router在远离导航时重新加载组件

1 个答案: