react-base-demos
/
04-demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 注意: 先引入 react基础库,再引入react dom解析库 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
  <style>
    .danger{
      color: red;
    }
    .large{
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!-- 声明周期函数和state -->
  <div id="root"></div>
  <script type="text/babel">
    class HelloWorld extends React.Component {
      // es6的构造函数
      constructor(){
        // 接用构造函数
        super();
        console.log('构造函数执行...');
        // this是HelloWorld组件的实例对象
        this.nowTime = new Date().toString();
        console.log('this',this);
      }
      // ()形式声明 是声明到了组件实例对象的原型对象上
      componentDidMount(){
        console.log('组件挂载完毕...');
        // 尝试修改nowTime
        setInterval(()=>{
          // 这里的修改的确修改了nowTime,但是没有响应到页面中.
          // react没有vue中的双向响应,想要更新页面,必须主动或者被动的触发render()
          this.nowTime = new Date().toString();
          console.log('this.nowTime',this.nowTime);
        },1000)
      }
      componentDidUpdate(){
        console.log('组件更新...');
      }
      componentWillUnmount(){
        console.log('组件即将被销毁...');
      }
      render(){
        console.log('render...');
        return (
          <div>
            <h1>声明周期函数和state</h1>
            <p>{this.nowTime}</p>
          </div>
        )
      }
    }
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));

  </script>
</body>
</html>