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知道顶部div有两个类型TestInnerComponent的孩子，现在它只有一个div类型的孩子，所以React删除了旧实例并在顶部div下创建了所有树从头开始。因此TestInnerComponent实例将被卸载，再次创建并在第二个div中装载。同样不建议在render方法中创建jsx。

创建组件实例时

1 个答案: