今天晚上学习了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. redis支持哪些数据类型

    虽然redis的key和value之支持string和byte[],但是仍可以以string的形式保存其他格式,甚至是图片. 1)String: 用set(key,value),get(key) 2) ...

  2. hibernate validator 专题

    JSR-303 原生支持的限制有如下几种 : 限制 说明 @Null 限制只能为 null @NotNull 限制必须不为 null @AssertFalse 限制必须为 false @AssertT ...

  3. 扪心自问，强大的UI框架，给我们带来了什么？（作者因此写了一个GuiLite）

    MFC, QT, MINIGUI, ANDROID, IOS,如果这些平台,你都使用过,在下真心佩服,也相信你对这篇文章最具有发言权,真心期待你的回复和建议. 这些著名的UI说出来都让人如雷贯耳,如果 ...

  4. top(k,n)—db kernel队解题思路

    0. 比赛 公司里的第三届XX中间件性能挑战赛 我和另外两个P5组队参加,队名为"db kernel".最后获得了第八,应该是P5里的最高排名. 以下简单扼要地介绍一下题目,以及我 ...

  5. WPF与缓动(一) N次缓动

    原文:WPF与缓动(一) N次缓动   WPF与缓动(一)  N次缓动                                                                  ...

  6. html5 命运之轮生产

    码,如以下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  7. sql 循环 随机数创建数据

    --循环 WHILE @i<40 BEGIN …… end --随机数 SET @money=rand()*100000 例子: DECLARE @i INT DECLARE @money MO ...

  8. SQLSTATE[HY000]: General error: 1205 Lock wait timeout exceeded; try restarting transaction 解决方法

    SHOW FULL PROCESSLIST; KILL 263071

  9. php 获取今日、昨日、本周,上周、本月,上月,季度的起始时间戳和结束时间戳的方法

    php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日.上周.本月的起始 ...

  10. 什么是MonoGame？

    MonoGame是XNA的一个开源实现.主要用于游戏开发. 官方网站:http://www.monogame.net/ 源码地址:https://github.com/MonoGame/MonoGam ...