react-base-demos
/
05-state和setState.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和setState -->
  <div id="root"></div>
  <script type="text/babel">
    class HelloWorld extends React.Component {
      // es6的构造函数
      constructor(){
        // 接用构造函数
        super();
        console.log('构造函数执行...');
        // state用于创建需要变化的值
        this.state = {
          nowTime: new Date().toString(),
          count: 0
        }

        console.log('this',this);
      }
      // ()形式声明 是声明到了组件实例对象的原型对象上
      componentDidMount(){
        console.log('组件挂载完毕...');
        // 更新一次count ,检查setState()是否是异步的
        // setState()会合并更新,某一次更新如果依赖于上一次的值,可能会有问题
        // setState() 可以理解位被动的调用了render(),进而更新页面.
        // this.setState({
        //   count: this.state.count + 1   // 1
        // })
        // this.setState({
        //   count: this.state.count + 1  // 2
        // })
        // 注意: 如果依赖于上一次的state,可以在回调里处理.但是尤其注意,这里需要返回一个{}对象
        this.setState((state,props)=>({
          count: state.count + 1
        }))
        this.setState((state,props)=>({
          count: state.count + 1
        }),()=>{
          // 如果在回调里输出,那么会在更新完毕后执行
          console.log('this.state.count',this.state.count); // 0?
        })

        // 尝试修改nowTime
        setInterval(()=>{
          // 不能直接修改state的值,需要通过setState()
          this.setState({
            nowTime: new Date().toString()
          })
          // console.log('this.nowTime',this.state.nowTime);
          console.log('this',this);
        },1000)
      }
      componentDidUpdate(){
        console.log('组件更新...');
      }
      componentWillUnmount(){
        console.log('组件即将被销毁...');
      }
      render(){
        console.log('render...');
        return (
          <div>
            <h1>声明周期函数和state</h1>
            <p>{this.state.nowTime}</p>
            <p>count: {this.state.count}</p>
          </div>
        )
      }
    }
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));

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