the-fool

今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!:

 

上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例:

// 方式二:(复杂组件)类组件【ES6】,这是一个基本的类组件
        class Component extends React.Component{
              render(){
                  return <div>类组件B</div>;
              }
        }

 

在这里我要将上面的类组件进行相对的完善,使它支持数据变量的操作,这里就用到了state:

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库,ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>


    <script type="text/babel">
        //定义组件
        // 方式二:(复杂组件)类组件【ES6】
        class Component extends React.Component{
            //构造函数,构建一个组件
            constructor(props){
                super(props);
                this.state={
                    name:'tom'
                }
            }
            //渲染页面的方法
            render(){
                return <div>名字:{this.state.name}</div>;
            }
        }
        //将组件渲染到指定位置
        ReactDOM.render(<Component />,document.getElementById("content"))


    </script>


</body>
</html>

此时页面将显示出变量的值:

 

 那么我现在想动态的更新页面的值,该如何控制呢?看下面的DEMO:

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库,ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>

    <script type="text/babel">
        //定义组件
        class Component extends React.Component{
            //构造函数,在初始化组件的时候会执行
              constructor(props){
                  super(props);
                  this.state={
                      name:'tom',
                      age:20
                  }
              }
            //render会进行页面的渲染,当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
              render(){
                  //从state中取值
                  const name = this.state.name;
                  const age = this.state.age;
                  return(
                      <div>
                          <p>名字:{name}</p>
                          <p>年龄:{age}</p>
                          //绑定onClick事件函数,关于bind(this)会在下面讲到
                          <button onClick={this.addAge.bind(this)}>一年</button>
                      </div>
                  );
              }
            //点击事件函数,点击会更新state对象的值
              addAge(){
                 //从state中取值
                 let age = this.state.age;
                 age+=1;
                 //给state中的数据赋值,非简写方式this.setState({age:age})
                 this.setState({age})
              }
        }

        ReactDOM.render(<Component />,document.getElementById("content"));


    </script>


</body>
</html>

  页面表现如下,随着我点击“一年”的按钮,年龄后的数字逐渐增大:

 

分类:

React

技术点:

相关文章: