今天晚上学习了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】react学习笔记03-React组件对象的三大属性-state的更多相关文章

  1. React+Redux学习笔记：React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  2. 【前端学习笔记03】JavaScript对象相关方法及封装

    //Object.create()创建对象 var obj = Object.create({aa:1,bb:2,cc:'c'}); obj.dd = 4; console.log(obj.cc); ...

  3. DOM学习笔记（二）对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  4. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  5. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  6. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  7. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  8. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  9. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

随机推荐

  1. Linux学习（1）vi编辑器的常用命令

    今天对Linux中的vi编辑器进行了学习,对其中的常用命令进行总结: 数字 0 或^:光标移到行首 $              :光标移到行尾 H             :光标移到屏幕的首行 L ...

  2. Opencv中SVM样本训练、归类流程及实现

    支持向量机(SVM)中最核心的是什么?个人理解就是前4个字--"支持向量",一旦在两类或多累样本集中定位到某些特定的点作为支持向量,就可以依据这些支持向量计算出来分类超平面,再依据 ...

  3. redis,docker和kubernetes留言簿案例实战

    kubernetes实战-基于redis和docker的留言簿案例 [置顶] kubernetes实战-基于redis和docker的留言簿案例 标签: dockerkubernetesredis 2 ...

  4. Linux性能测试 /proc目录

    /proc文件系统 - 各种内核信息/proc目录下文件提供了很多不同硬件设备和内核的详细信息.更多详情参见Linux kernel /proc.一般/proc例如: [root@SM155 proc ...

  5. 【甘道夫】基于Mahout0.9+CDH5.2执行分布式ItemCF推荐算法

    环境: hadoop-2.5.0-cdh5.2.0 mahout-0.9-cdh5.2.0 引言 尽管Mahout已经宣布不再继续基于Mapreduce开发,迁移到Spark.可是实际面临的情况是公司 ...

  6. python 教程 第十九章、 图形界面编程

    第十九章. 图形界面编程 import Tkinter top = Tkinter.Tk() hello = Tkinter.Label(top, text='Hello World!') hello ...

  7. [视频]产品营销之拍出好电子产品，Peter Belanger是如何为苹果产品拍照的

    Peter Belanger –他就是那些颠覆你想象的苹果产品照片的摄影师.作为旧金山的顶级产品图片设计师的 Peter,他还拥有 eBay, Nike, Pixer 和 Square 等客户. 让我 ...

  8. Microsoft.AspNet.SignalR实现弹幕(即时通讯)

    引用 Microsoft.AspNet.SignalR 服务器 自定义Connection public class BarrageConnection : PersistentConnection ...

  9. sql server DateTime与DateTime2的区别

    DateTime字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fff ,3个f,精确到1毫秒(ms),示例 2014-12-03 17:06:15.433 .DateTime2字段 ...

  10. 基于IOCP的高速文件传输代码

    //服务端: const   //transmit用的参数   TF_USE_KERNEL_APC     = $20;   //命令类型   CMD_CapScreen             =  ...