在什麼情況下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>