[英]React: is componentDidUpdate same for 2 different instances of a component?
I am writing a React (ES6, v16) (typescript) application with react-router v4. 我正在使用react-router v4编写一个React(ES6,v16)(打字稿)应用程序。 I am observing a very strange behavior. 我观察到一种非常奇怪的行为。 Here is my render code (very much simplified): 这是我的渲染代码(非常简化):
render() {
<Switch>
<Route
path="/foo/add"
render={ props => {
return (
<FormEntry title="add new" />
);
}}
/>
<Route
path="/foo/edit/:id"
render={ props => {
return (
<FormEntry title="edit item" />
);
}}
/>
</Switch>
}
And here is the FormEntry component (simplified): 这是FormEntry组件(简化):
class FormEntry extends React.Component< { title: string }, any > {
render() {
return (
<div>
{this.props.title}
</div>
);
}
componentDidMount() {
// code goes here
}
componentDidUpdate() {
// code goes here
}
}
Now when, inside the application, I click a link "/foo/add", the handler in the first "Route" component is fired (as expected) and the component "FormEntry" is mounted. 现在,当在应用程序内部单击链接“/ foo / add”时,将触发第一个“Route”组件中的处理程序(按预期方式)并安装组件“FormEntry”。 The method componentDidMount is rightfully fired. 正确触发方法componentDidMount。
Now I click the link "foo/edit/1". 现在我点击“foo / edit / 1”链接。 The handler of the second Route is fired. 第二个Route的处理程序被触发。
This time, inside the "FormEntry" component, the lifecycle method "componentDidMount" is not fired, the method "componentDidUpdate" is called. 这次,在“FormEntry”组件内部,未触发生命周期方法“componentDidMount”,调用方法“componentDidUpdate”。 But this is cleary a different "instance" of the FormEntry which is being mounted. 但这是正在安装的FormEntry的另一个“实例”。 I was expecting the see of the lifecycle methods kicked off... 我期待看到生命周期方法开始......
It looks like there is only one instance of "FormEntry" in my application. 看起来我的应用程序中只有一个“FormEntry”实例。 So why in the second case (when Route handler for url "foo/edit:id") this instance does not go through the all lifecycle methods?? 那么为什么在第二种情况下(当URL处理程序为url“foo / edit:id”时)这个实例不会通过所有生命周期方法?
Is it a breaking change in the v16 version of React? 这是Re16的v16版本的重大变化吗? ( I have not observed this behavior in previous versions of react). (我在之前版本的反应中没有观察到这种行为)。
Your insight will be very much appreciated 非常感谢您的见解
<Switch>
check the JSX
of the previous matched route and compare it with the new JSX
of next route. <Switch>
检查上一个匹配路由的JSX
,并将其与下一个路由的新JSX
进行比较。
If it does match, it will use it and only update changed values without re-mounting components. 如果匹配,它将使用它并仅更新更改的值而无需重新安装组件。
Otherwise it will create new react elements and instantiate new components. 否则,它将创建新的react元素并实例化新的组件。
Check here: https://github.com/ReactTraining/react-router/pull/4592 点击此处: https : //github.com/ReactTraining/react-router/pull/4592
A turn around for this is to use key attributes like this: 转向这是为了使用这样的关键属性:
render() {
<Switch>
<Route
path="/foo/add"
render={ props => {
return (
<FormEntry key="1" title="add new" />
);
}}
/>
<Route
path="/foo/edit/:id"
render={ props => {
return (
<FormEntry key="2" title="edit item" />
);
}}
/>
</Switch>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.