我遇到这样的情况，我需要应用程序的组件根据用户单击按钮来呈现两种状态之一。我遇到的问题是，即使我要更改的只是组件的状态/属性，React也会触发这些组件的整个生命周期。由于遗留限制，我正在使用React 15.6（此应用实际上是嵌入了react的主干），我也无法使用JSX。

props.viewMode ==='ux'|| 'dnd'（基于用户按钮的点击次数）

以下是相关代码：

      render() {
        return this[this.props.viewMode]();
      }

      ux: function() {
        return React.createElement(
          "div",{
            "id":         this.props.node.type,"name":       this.props.node.component
          },**this.props.children**
        );  
      },dnd: function() {
        return React.createElement(
          "div",return React.createElement(
            "div",{
              "id":         this.props.node.type,"name":       this.props.node.component
            },**this.props.children**
          )
        );  
      },

运行此代码时，即使唯一更改的是viewMode，它也会在子级中触发getInitialState（）方法，该模式作为道具从链中最高顺序的组件向下传递至子级组件。

似乎在render（）方法之外对props.children的任何引用都会触发整个生命周期，从而破坏该组件并创建一个新组件。

如果我这样重构代码：

      render() {
        const children = this.props.children.sort((a,b) => { return a.order > b.order });
        const elem     = this[this.props.viewMode]();

        //assign children to elem,e.g. elem.props.children = children;

        return elem;
      }

      ux: function() {
        return React.createElement(
          "div",**null**
        );  
      },**null**
          )
        );  
      },

React不会在子级中触发getInitialState（）方法。

有人知道为什么会这样吗？我想念什么？