React-Router - 导航到 URL 时未调用 componentDidMount答案

【问题标题】：React-Router - componentDidMount not called when navigating to URLReact-Router - 导航到 URL 时未调用 componentDidMount
【发布时间】：2016-03-31 19:11:13
【问题描述】：

我对这个有点难过。我定义了一条名为classes/:id 的路线。在应用程序中导航到该路线时，会调用 componentDidMount()。但是，在重新加载页面或复制粘贴 URL 时，页面完全加载完毕，但根本不调用 componentDidMount() 方法。

根据我的阅读，原因是即使页面正在重新加载，也安装了相同的组件，这就是生命周期方法确实被触发的原因。

有什么方法可以解决这个问题？非常感谢您的帮助。谢谢！

【问题讨论】：

标签： react-router

【解决方案1】：

我尽量避免使用任何 mixin（请参阅 willTransitionTo），因为它们被认为是有害的。

虽然 componentDidMount 在更改同一组件的路由时不会触发，但 componentWillUpdate 和 componentWillReceiveProps 会。

从那里，您可以检测参数变化，并相应地触发您的操作。

【讨论】：

【解决方案2】：

componentWillReceiveProps,componentDidUpdate生命周期会接收到新的props，然后setState改变状态触发render方法。

【讨论】：

【解决方案3】：

如果您已经在classes/:id 路由上，则不会再次调用componentDidMount。你可能想做一些类似的事情：

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    // fetch or other component tasks necessary for rendering
  }
}

【讨论】：

补充我之前的答案：新的 React Hooks api 可以简化此代码。假设您的组件被传递了一个用于 api 调用的资源 id 的道具，您可能可以使用 useEffect 完成与 componentDidMount/componentDidUpdate 相同的功能，并将资源的 id 包含在依赖项列表中（即仅重新运行 useEffect如果 id 发生变化，函数）。

【解决方案4】：

我刚刚处理了这个确切的问题，花了我一段时间才弄清楚问题所在。我确信以前建议的所有内容都可以很好地作为解决方案。我如何解决这个问题有点不同。我的 componentDidMount 函数本质上只是提供状态更新，所以我只是将功能直接移动到状态中并绕过 componentDidMount。

老实说，我不确定这是否是最佳做法（如果不是，我很高兴收到反馈），但它运行高效并且到目前为止效果很好。

【讨论】：