Question

在大多数情况下，React类组件只构造一次。但有时我遇到的React类组件可以构造不止一次。

然后我从DOM中删除了React类组件，然后将多次构造React类组件。

Answer 1

为了呈现组件，必须调用构造函数以创建其支持类的实例。这只需要在第一次渲染之前完成一次。

如果您的组件已添加，然后删除，然后再次添加，则构造函数将被调用两次。与第二个组件对应的类是新的，并与第一个组分开。

以下是显示或隐藏其子项的组件示例。每次显示子项时，都会调用构造函数，如控制台中所示。

class ShowHide extends React.Component {
  constructor() {
    super();
    this.state = {
      isChildShown: true
    };
    
    this.toggleChild = this.toggleChild.bind(this);
  }
  
  toggleChild() {
    this.setState({
      isChildShown: !this.state.isChildShown
    });
  }
  
  render() {
    return <div>
      <button onClick={this.toggleChild}>toggle</button>
      {this.state.isChildShown ? this.props.children : null}
    </div>;
  }
}

class TestComponent extends React.Component {
  constructor() {
    super();
    console.log("constructor called");
  }
  
  render() {
    return <div>Hello</div>;
  }
}

ReactDOM.render(<ShowHide><TestComponent/></ShowHide>,
  document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

在什么情况下React类组件将被构造多次？

1 个答案: