今天晚上学习了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. 2-2 Consul注册注销流程

    铺垫,创建健康检查方法,Consul服务器隔一段时间请求一下webapi里的一个方法,如果这个方法没有问题,则证明这个webapi还在正常工作,这个webapi提供的服务就存在.如果方法没有返回,或者 ...

  2. WPF制作的党旗

    原文:WPF制作的党旗 --------------------------------------------------------------------------------引用或转载时请保 ...

  3. 在Expression Blend中制作侧面为梯形的类棱柱体

    原文:在Expression Blend中制作侧面为梯形的类棱柱体 在上一篇"在WPF设计工具Blend2中制作立方体图片效果"( http://blog.csdn.net/joh ...

  4. Math.Round四舍五入说明

    Math.Round默认采用的不是四舍五入法, 而是四舍六入的银行家算法, 如何找回四舍五入法? Math.Round默认采用的不是四舍五入法, 而是四舍六入的银行家算法,  也就是四舍六入五考虑,五 ...

  5. linq to entity GroupBy多个字段

    var items = _voteRecordRepository.GetAll() .Where(x => programIds.Contains(x.ProgrammeId)) .Group ...

  6. c# 自定义公共类CallFunction-调用函数信息帮助类

    /// <summary> /// 调用函数信息 /// </summary> public class CallFunction { /// <summary> ...

  7. xcode缓存清理

    移除对旧设备的支持 影响:可重新生成:再连接旧设备调试时,会重新自动生成. 路径: ~/Library/Developer/Xcode/iOS DeviceSupport 如果你不是在wb145230 ...

  8. 图像滤镜艺术---Photoshop实现Instagram Amaro滤镜特效

    原文:图像滤镜艺术---Photoshop实现Instagram Amaro滤镜特效 本文是我收集的一些使用Photoshop来实现Instagram滤镜的一些内容,在这里跟大家分享一下,这些效果是完 ...

  9. C#最基本的数据库增删改查

    namespace access { public partial class Form1 : Form { //定义数据库的连接路径 string txtConn ="Provider=M ...

  10. 使用VC2005编译真正的静态Qt程序 good

    首先,你应该该知道什么叫静态引用编译.什么叫动态引用编译.我这里只是简单的提提,具体的可以google一下. 动态引用编译,是指相关的库,以dll的形式引用库.动态编译的Exe程序尺寸比较小,因为相关 ...