ReactOwnershipExperiment.js

class SharedComponent extends React.Component { 
  render() {
    return <div>Shared Component</div>;
  }
}

const Compositor = (Component) => (
  class extends React.Component {
    constructor() {
      super(...arguments);
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      console.log(this.refs.handle.refs);
    }
    render() {
      return (
        <div>
          <Component ref='handle'/>
          <div onClick={this.handleClick}>Log References</div>
        </div>
      );
    } 
  } 
);

const ComponentA = Compositor(class extends React.Component {
  constructor() {
    super(...arguments);
    this.state = { isLoaded: false };
  }
  render() {
    if (!this.state.isLoaded) return null;
    return (
      <div>
        <SharedComponent ref='something' />
        <div ref='unique'>Hello world!</div>
      </div>
    );
  }
});

const ComponentB = Compositor(class extends React.Component {
  render() {
    return (
      <div>
        <SharedComponent ref='something' />
        <div ref='unique'>Hello world!</div>
      </div>
    );
  }
});

class App extends React.Component {
  constructor() {
    super(...arguments);
    this.handleClick = this.handleClick.bind(this);
    this.state = { toggle: false };
  }
  handleClick() {
    this.setState({
      toggle: !this.state.toggle
    })
  }
  render() {
    return (
      <div>
        {this.state.toggle ? <ComponentA /> : <ComponentB />}
        <div onClick={this.handleClick}>Toggle Components</div>
      </div>
    );
  }
}