我有一个问题,为什么在某些情况下componentWillUnmount
即使卸载了我期望的组件也未调用method的问题。
更具体地说,这是示例。让我们考虑一个带有一个按钮和2个孩子的Parent组件:Child_Odd和Child_Even。如果按钮的点击次数为奇数,则“显示为Child_Odd”,否则为“显示”为Child_Even。
我希望看到componentWillUnmount
当组件“消失”时要调用的方法,但是相反,这不会发生。在这里,堆栈闪电重现了案例(此堆栈闪电还包括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),这可能对您有用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句