React-router-dom 在卸载组件之前首先调用构造函数答案

【问题标题】：React-router-dom calls constructor first before unmounting the componentReact-router-dom 在卸载组件之前首先调用构造函数
【发布时间】：2019-04-02 05:47:35
【问题描述】：

我希望每次单击标题中的链接时都重新渲染组件。所以我使用了route 中的组件道具来重新渲染我的组件。

<Route
 exact
 path="/assets"
 component={props => (<AssetsView {...props} />)}
/>

在文档中指出

这会导致现有组件卸载和新组件组件安装，而不是仅仅更新现有组件。

但是，当我单击链接时，首先调用构造函数，然后是 componentWillMount，而 componentWillUnmount 是最后一个被调用的生命周期。

我有 2 个组件 Edit 和 Table view，我使用 react-router-dom 在这两个组件之间导航。当我在 Edit 组件中时，我想根据 Table 组件挂载之前的条件更改 unmount 时的 redux 状态，并在 Table 组件的初始状态（使用 Constructor）中使用更改后的 redux 状态。如何实现？

示例程序 - https://codesandbox.io/s/kmy387l59o

有人遇到过这个问题吗？

【问题讨论】：

我猜你不应该依赖你期望的优先级。您可能有 XY 问题，根本不需要重新安装组件（这看起来很可疑）。考虑用你真正的问题重新提出这个问题。它可能可以通过更传统的方式解决。
您每次都想渲染的任何特殊原因？
我想重置组件的现有状态并在componentDidMount中进行API调用

标签： reactjs react-redux react-router-dom

【解决方案1】：

从 React16 开始，componentWillUnmount 是异步的，这就是为什么在下一个组件 componentWillMount 之后调用它。更多详情请查看讨论here.

在 React 15 中，在渲染之前首先调用 ComponentWillUnmount DOM 中的下一个组件。在当前版本 (v16) 中， ComponentWillUnmount 在下一个组件挂载后被调用。

【讨论】：