index4.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<!--
	<script src="https://cdn.bootcss.com/react/16.7.0-alpha.2/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script>
-->
 <script src="./dist/React.js"></script> 
 <script src="./lib/ReactPropTypes.js"></script>

	<script type='text/javascript' src="./lib/babel.js"></script>

</head>

<body>
    <div id='root' class="root">

    </div>
    <script type='text/babel'>
  
  var container = document.getElementById('root');
  var Theme = React.createContext("xxx")
  var useContext = React.useContext
  class A extends React.Component{
    state = {
      time: 19860219
    }
    onClick(){
      this.setState({
        time: new Date - 0
      })
    }
    render(){
      console.log('a render')
      return <div>
        <Theme.Provider value={this.state.time}>
        <B />
        <button type="button" onClick={
            this.onClick.bind(this)
      }> change </button>
      </Theme.Provider>
      </div>
    }
  
  }
  class B extends React.Component{
    shouldComponentUpdate(a, b){
      return false
    }
    render(){
      console.log('b render')
      return <div><C /></div>
    }
  
  }
  function C(){
     var context = useContext(Theme)
     console.log('c render')
      return <strong>{context}</strong>
  }

  ReactDOM.render(<A />, container)
      
      </script>


</html>

 