React shouldComponentUpdateサンプル

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="sample"></div>
<script type="text/babel">
class Inner1 extends React.Component {
	shouldComponentUpdate(nextProps,nextState){
		return nextProps.num%2===1
	}
	render(){
  	return (
			<span>{this.props.num}</span>
		)
	}
}
class Inner2 extends React.Component {
	render(){
  	return (
			<span>{this.props.num}</span>
		)
	}
}
class Wrap extends React.Component {
  constructor(props) {
    super(props);
    this.state = { num:0 };
  }
  handleClick(e){
    this.setState({
      num: this.state.num + 1
    });
  }
	render(){
  	return (
    	<div>
				<div><Inner1 num={this.state.num} /></div>
				<div><Inner2 num={this.state.num} /></div>
				<button onClick={this.handleClick.bind(this)}>click</button>
       </div>
    )
  }
}
React.render(
  <Wrap/>,
  document.getElementById('sample')
);
</script>