今天晚上学习了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. 在动态THML语句中调用JS函数传递带空格参数的问题

    刚刚遇到一个问题,调用js函数的参数里带空格,造成调用失败的问题.   部分代码如下: html+="<div><a href=javascript:confirm(&qu ...

  2. Linux下快速静态编译Qt以及Qt动态/静态版本共存（提供了编译4.6，5.6的精通编译脚本，并且apt-get install 需要的库也全列出来了。还有分析问题的心理过程）good

    qt4.6 Linux./configure -static -release -confirm-license -opensource -qt-zlib -qt-libpng -qt-libjpeg ...

  3. 常见的选择&lt;数据源协议，委托协议&gt;（IOS发展）

    -常见的选择必须满足这两个协议,约定实施.一个为数据源协议 -托付协议负责控制控件UI.事件响应, 实现可选 -数据源协议负责控件与应用数据模型的桥梁,一般必须实现 @interface ViewCo ...

  4. 嵌入式开发（*（volatile unsigned long *)) 认识

    一个.说明 (*(volatile unsigned long *)) 这个语句对于不同的计算机体系结构,设备可能是port映射,也可能是内存映射的. 假设系统结构支持独立的IO地址空间.而且是por ...

  5. matlab GUI 编程

    matlab 语法的简便,在 GUI 上也不遑多让呀: uigetfile [filename, pathname] = uigetfile('*.m', 'choose a m file') 1. ...

  6. MVC WebApi

    两种web服务 •SOAP风格:基于方法,产品是WebService •REST风格:基于资源,产品是WebAPI 对于数据的增.删.改.查,提供相对的资源操作,按照请求的类型进行相应处理,主要包括G ...

  7. 实现：C#窗体中的文本框只能输入中文汉字，其他输入无效。问：正则表达式怎么用？

    原文:实现:C#窗体中的文本框只能输入中文汉字,其他输入无效.问:正则表达式怎么用? private void textBox1_KeyPress(object sender, KeyPressEve ...

  8. 加快QT工程编译速度（还可给Qt for Android设置）

    一.多核编译 环境:win10, Qt 5.4.1,编译器mingw32 项目: Qt for Android Qt Creator 在编译android项目时不支持预编译,默认cpu单核编译,工程稍 ...

  9. 【C#】解决MouseHook捕获鼠标动作，在有些电脑上SetWindowsHookEx失败返回0的问题

    原文:[C#]解决MouseHook捕获鼠标动作,在有些电脑上SetWindowsHookEx失败返回0的问题 最近在debug鼠标位置捕获的功能时发现在其中的一台开发电脑上,SetWindowsHo ...

  10. ELINK离线编程器版本说明

    ELINK离线编程器版本详情,ELinkPROG版本与固件版本须匹配使用! 编程器支持芯片详细列表参见  https://www.cnblogs.com/raswin/p/9303300.html