Question

我有这条路线（简体）

<Route 
  path="/foo/:id">
  render={({match}) => (
    <Page key={match.params.id} id={match.params.id}/>
  )}
</Route>

现在这样做的原因是，当我从/foo/1转到/foo/2时，我不想清除和更新现有组件的状态，就我而言，它太复杂了。因此，我有一个动态密钥，该密钥导致卸载/foo/1组件并安装全新的/foo/2组件。

到目前为止，一切都很好。但是这里是要抓住的地方。我观察到的生命周期就是这个

为什么在安装第二个组件之前不卸载第一个组件？因此，我得到了奇怪的重新渲染和故障（它连接到redux存储，并且/foo/2组件的初始化更改了设法重新渲染仍存在的组件/foo/1的存储）。任何想法如何避免这种情况？

谢谢

Answer 1

很难确定您的短代码片段到底发生了什么，但是，我相信您的问题与某些反模式有关；

react组件构造函数仅应用于两件事：

https://reactjs.org/docs/react-component.html#constructor

第二，您正在使用带有内联函数的render道具，这意味着一旦检测到匹配的路线并且父组件重新渲染，它将重新构造该组件，先将其卸载然后再安装再来一次。为了避免这种情况，您应该在父级渲染函数之外定义渲染函数。

第三，因为您有一条动态路由/foo/:id并将:id的值分配给子组件的键，则react将其视为不同的组件，并且直到当前渲染过程才将其卸载已达到un-mounting阶段。这意味着您会在短时间内出现<Page key={1} />和<Page key={2}/>。

由于这三个问题，您正在获得一个看起来很奇怪的组件生命周期，但实际上，它确实按照您的要求做出了反应。

解决方案：