Когда создается экземпляр компонента

Question

У меня есть субкомпонент внутри другого.Все они создают (запускает конструктор) в начале.Но когда я работаю внутри компонента (нажмите кнопку), мой внутренний компонент создается снова (запускает конструктор). В каких случаях реагируют воссозданные элементы?

Пример:

class TestAppComponent extends React.Component {
  constructor(params) {
    super(params);
    console.log("TestAppComponent created");

    this.TestInnerComponent1=<TestInnerComponent message="I am 1" />
    this.TestInnerComponent2=<TestInnerComponent message="I am 2" />

    this.order=true;
  }
  onClickedFire(){
    this.order=!this.order;
    this.setState({asd:"asd"});
  }
  RenderComponents(){
    if(this.order){
      return(<div>
        <div>
          {this.TestInnerComponent1}
          {this.TestInnerComponent2}
        </div>
      </div>);
    }
    return(<div>
      {this.TestInnerComponent2}
      {this.TestInnerComponent1}
    </div>);
  }
  render(){
    console.log("TestAppComponent render");
    return(<div>
      {this.RenderComponents()}
      <button onClick={this.onClickedFire.bind(this)} >Fire!!!</button>
    </div>);
  }
}
class TestInnerComponent extends React.Component {
  constructor(params) {
    super(params);
    console.log("TestInnerComponent created");
  }
  render(){
    console.log("TestInnerComponent render");
    return(<div>
      {this.props.message}
    </div>);
  }
}

Answer 1

RenderComponents метод возвращает два вложенных div в случае, если this.order === true.React знает, что у top div есть два дочерних элемента типа TestInnerComponent, и теперь у него есть только один дочерний элемент типа div, поэтому React удаляет старые экземпляры и создает все дерево под top div с нуля.Таким образом, TestInnerComponent экземпляры размонтируются, создаются заново и монтируются во втором div.Также не рекомендуется создавать jsx не в методе рендеринга.