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

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>