代码之家 › 专栏 › 技术社区 › user219882

反应路由器的奇怪组件生命周期

react-router redux reactjs

user219882 · 技术社区 · 6 年前

我有这条路线(简化)

<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 )有什么办法可以避免这种情况吗?

谢谢

1 回复 | 直到 6 年前

Max Bush 6 年前

很难确切地确定您的代码片段发生了什么,但是,我相信您的问题与一些反模式有关;

React组件构造函数只能用于两个方面:

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

第二,你使用的是 render prop带有内联函数,这意味着当检测到匹配的路由并且父组件重新呈现时,它将重新构造该组件,先卸载它,然后再次装载它。为了防止出现这种情况,您应该在父级渲染函数之外定义渲染函数。

第三,因为你有一条动态路线 /foo/:id 并赋予 :id 对于子组件的键,react将其视为不同的组件,并且在当前渲染过程达到 un-mounting 阶段。这意味着在短时间内 <Page key={1} /> 和; <Page key={2}/> 出席。

因为这三个问题,您得到的似乎是一个奇怪的组件生命周期,但事实上,它的反应正是您告诉它要做的。

解决方案:

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

2 年前

universe11 · 对伊默来说,这是正确的还是错误的?

2 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

2 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

2 年前

geyser · React Redux toolkit-输入字段的状态管理

2 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

2 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

2 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

2 年前