componentWillUnmount方法在react组件消失时不被调用

Question

我有一个问题，理解为什么在某些情况下，即使我期望的组件被卸载，也不调用componentWillUnmount方法。

更具体地说，这是一个例子。让我们考虑一个Parent组件，它有一个按钮和两个子组件:Child_Odd和Child_Even。Child_Odd "显示"如果按钮的点击次数为奇数，则Child_Even为"shown"

我希望看到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,
}));
}
}

Answer 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)，它可能对你有用。