diffing.js

render(){
  return (
    <div>
      <div className="header">
        <h2>Im always diffed along with the className on my parent</h2>
      </div>
      <ul className="list">
        {this.props.foo.map((x, i) => {
          /*
            React sees this:
            <li className="item">
              <span>foo: </span><span>{x} </span><em>(bar)</em>
            </li>
            
            Diffs li, li[className], li > *
              span@1 > *
              span@2 > *
              em@3 > *
          */
          
          return (
            <li key={i} className="item">
              foo: {x} <em>(bar)</em>
            </li>
          );
        });
      </ul>
      <div className="footer">
        {/* neive PureRender will always see onSomeAction as changing */
        <Something 
          onSomeAction={(e) => this.foo()}
          data={this.props.data}
          />
      </div>
    </div>
  );
}