今天晚上学习了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. silverlight，WPF动画终极攻略之会飞的小鸟篇（Blend 4开发）

    原文:silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发) 本教程基本涵盖了WPF和silverlight中的各种动画.先上张效果图. 声明下,这个做的不是让大家照搬的,只是 ...

  2. ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程，简单编程

    原文:ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 配置 上一章节我们简单介绍了下 Id ...

  3. NS2网络模拟(6)-homework02.tcl

    1: #NS2_有线部分\homework02.tcl 2: 3: #Create a simulator object 4: set ns [new Simulator] 5: 6: #Define ...

  4. Coder-Strike 2014 - Finals (online edition, Div. 1)

    CF 420A  A. Start Up 题目链接: http://codeforces.com/problemset/problem/420/A 题目意思: 给一个字符串A,通过镜面反射后得到A', ...

  5. 解决引用 System.Windows.Interactivity程序集生成多国语言文件夹fr、es、ja等问题

    原文:解决引用 System.Windows.Interactivity程序集生成多国语言文件夹fr.es.ja等问题 通过以下方式对 System.Windows.Interactivity程序集添 ...

  6. [LeetCode OJ] Copy List with Random Pointer 扩大

    职务地址:https://oj.leetcode.com/problems/copy-list-with-random-pointer/ 题意:对一个有回路的链表的深复制 解题:这道题我AC了之后才发 ...

  7. WPF依赖属性对内存的使用方式

    WPF允许对象在创建时候并不包含存储数据的空间,只保留在用到时获取数据默认值,借用其他对象数据或者实时分配空间的能力

  8. C# 异步委托的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  9. 【Android】解决微信调起支付接口没反应，调不起来微信的问题

    原文:[Android]解决微信调起支付接口没反应,调不起来微信的问题 //#前言 吐槽一下,微信支付的sdk真难用,文档混乱,坑不少. 正文:可能引起这种情况的问题 1. 最不能出现的 你的APPI ...

  10. Win10《芒果TV》商店内测版更新至v3.7.65.0：跨平台UI新体验，铺路SP

    Win10<芒果TV - Preview>是Win10<芒果TV>官方唯一指定内测预览版,最新的改进和功能更新将会在此版本优先体验. 春去夏来,初心犹在,Win10<芒果 ...