【React】react学习笔记03-React组件对象的三大属性-状态【state】

原创已于 2022-01-27 16:38:30 修改 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2019-09-27 17:34:49 首次发布

React 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了React中State的使用方法，包括State的基本概念、如何在类组件中初始化State，以及如何通过setState()方法更新State来实现组件的动态渲染。通过实际代码示例，展示了如何在组件中设置和更新State，以及如何响应用户事件动态更新页面。

今天晚上学习了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基础库-->
       <!--react基础库-->
      <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.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>

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