SOURCE

function createComponent(name) {
  class _MyNode extends React.Component{
    constructor(props) {
      super(props);
      console.log(name + ' is created.');
    }
    componentDidMount() {
      console.log(name + ' did mount.');
    }
    
    componentWillUnmount() {
      console.log(name + ' will unmount.');
    }
    
    componentDidUpdate() {
      console.log(name + ' is updated.');
    }
    
    render() {
      return (
        <div className={'node ' + name} data-name={name}>
          {this.props.children}
        </div>
      );
    }
  }
  return _MyNode;
}

var Root = createComponent('R');
var A = createComponent('A');
var B = createComponent('B');
var C = createComponent('C');
var D = createComponent('D');

var Wrapper = React.createClass({
  propTypes: {
    shape: React.PropTypes.string.isRequired
  },
  
  shape1: function() {
    return (
      <Root>
        <A>
          <B />
          <C />
        </A>
        <D />
      </Root>
    );
  },
  
  shape2: function() {
    return (
      <Root>
        <A>
          <B />
        </A>
        <D>
          <C />
        </D>
      </Root>
    );
  },
  
  shape3: function() {
    return (
      <Root>
        <A>
          <B>
            <C />
          </B>
        </A>
        <D />
      </Root>
    );
  },
  
  shape4: function() {
    return (
      <Root>
        <A>
          <B />
          <D>
            <C />
          </D>
        </A>
      </Root>
    );
  },

  shape5: function() {
    return (
      <Root>
        <A>
          <B />
          <C />
        </A>
      </Root>
    );
  },

  shape6: function() {
    return (
      <Root>
        <A>
          <C />
          <B />
        </A>
      </Root>
    );
  },
  
  render: function() {
    if (this[this.props.shape]) {
      return this[this.props.shape]();
    } else {
      return <Root />;
    } 
  }
});

window.render = function render(shape) {
  React.render(<Wrapper shape={shape}/>,  document.getElementById('react-root'), function() {console.log('=====================');});
}

<button onclick="render('shape1')">Shape 1</button>
  <button onclick="render('shape2')">Shape 2</button>
  <button onclick="render('shape3')">Shape 3</button>
  <button onclick="render('shape4')">Shape 4</button>
  <button onclick="render('shape5')">Shape 5</button>
  <button onclick="render('shape6')">Shape 6</button>
  <button onclick="render('none')">Clear</button>
  <a href="https://github.com/supnate/react-dom-diff" style="margin-left: 20px; font-size: 12px; color: red;">Fork me</a>
  <div id="react-root"></div>

.node {
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #999;
  text-align: center;
  width: 40px;
  height: 40px;
  top: 70px;
  border-radius: 40px/2;
}
.node:after {
  font-size: 20px;
  font-family: Arial;
  line-height: 40px;
  color: #555;
  content: attr(data-name);
}
.node .node:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 1px;
  height: 40.622577482985px;
  background-color: #999;
  left: 0px;
  top: 0px;
}
.node .node:last-child {
  left: 40px;
}
.node .node:last-child:before {
  transform: translate(-2px,-37.311288741493px) rotate(-0.51914611424652rad);
}
.node .node:first-child {
  left: -40px;
}
.node .node:first-child:before {
  transform: translate(40px,-35.311288741493px) rotate(0.51914611424652rad);
}
.R {
  left: 200px;
  top: 100px;
}