反应组件消失时未调用componentWillUnmount方法

debugcn 发表于 Dev

皮奇

我有一个问题，为什么在某些情况下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,
    }));
  }
}

Oblosys

由于组件保持安装状态，因此不会触发。关于和解，条件表达式

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] 删除。