reactjs - 反应组件消失时未调用componentWillUnmount方法
问题描述
我很难理解为什么在某些情况下componentWillUnmount
即使卸载了我期望的组件也不调用方法。
更具体地说,这是一个例子。让我们考虑一个带有一个按钮和 2 个子组件的父组件:Child_Odd 和 Child_Even。如果按钮的点击次数是奇数,则 Child_Odd 为“显示”,否则 Child_Even 为“显示”。
我希望看到componentWillUnmount
当组件“消失”时要调用的方法,但相反这不会发生。这里是重现该案例的 stackblitz(此 stackblitz 还包括componentWillUnmount
实际调用该方法的类似案例)。
这是相关代码
export class ChildFlipped extends React.Component {
render() {
return (
<div>
{this.props.name} - No of clicks ({this.props.numberOfClicks})
</div>
);
}
}
export class ParentFlips extends React.Component {
constructor(props: any) {
super(props);
this.state = {
clickCounter: 0,
};
}
render() {
return (
<div>
<button
onClick={() => this.updateState()}
>
Click me
</button>
{this.state.clickCounter % 2 ? (
<ChildFlipped
name={"Even"}
numberOfClicks={this.state.clickCounter}
></ChildFlipped>
) : (
<ChildFlipped
name={"Odd"}
numberOfClicks={this.state.clickCounter}
></ChildFlipped>
)}
</div>
);
}
updateState() {
this.setState((prevState, _props) => ({
clickCounter: prevState.clickCounter + 1,
}));
}
}
解决方案
它不会触发,因为组件仍然安装。关于和解,条件表达式
this.state.clickCounter % 2
? <ChildFlipped name={"Even"} numberOfClicks={this.state.clickCounter}/>
: <ChildFlipped name={"Odd"} numberOfClicks={this.state.clickCounter}/>
无法区分
<ChildFlipped name={this.state.clickCounter % 2? "Even" : "Odd"}
numberOfClicks={this.state.clickCounter}/>
因为这两个子句都指的是同一个ChildFlipped
组件。如果添加键,则可以使它们可区分并触发卸载:
his.state.clickCounter % 2
? <ChildFlipped key='even' name={"Even"} numberOfClicks={this.state.clickCounter}/>
: <ChildFlipped key='odd' name={"Odd"} numberOfClicks={this.state.clickCounter}/>
为了试验生命周期方法,我构建了一个React 生命周期可视化工具(StackBlitz),它可能对你有用。
推荐阅读
- postgresql-9.4 - PostgreSQL 动态列选择
- reactjs - 选择img文件后如何上传两个图像路径并将它们传递给调用组件上传的组件?
- r - 用 bshazard 包 + 生命表中的危险比绘制危险函数
- flutter - 我已经尝试过所有版本的 flutter_facebook_login 和 libphonenumber。我已将 sdk 版本更改为 2.2.3 它可以工作但无法编译
- php - 如何理解 php 中的这种写法
- javascript - 来自用户输入的 Javascript getElementById(用于传递 RSS FeedUrl)
- javascript - 将“附加”组件反应到 DOM?
- flutter - Flutter - modalBottomSheet 中 StatefulBuilder 中的 TextField 不起作用
- flutter - 如何使用颤振生成路由方法通过构造函数将值传递到另一个屏幕?
- uml - 描述循环模式更合适的 UML 图是什么?