demo如下

class Demo4StateLearn extends React.Component { constructor(props) { super(props); this.state = { a:11 }; this.a = this.state.a;//在创建该组件的时候就设置 this.a = 状态机.a } loadData(e) {//每次输入改变状态机 const value = e.target.value; this.setState({a:value}); } render() { return ( <div> <input type="text" onChange={(e)=>{this.loadData(e)}}/> <div>this.state.a:{this.state.a}</div> <div>this.a:{this.a}</div> </div>  ) } }

网页效果如下图:

所以我们在基于React开发的时候,应该避免使用这种开发方式;而常见的使用方式更多的是如下:

render() { const a = this.state.a;//在render函数中在取值,这样就可以避免以上问题;因为每次setState都会触发render的重新执行;所以也就重新指向了新的地址; return ( <div style={{margin:"20px"}}> <input type="text" onChange={(e)=>{this.loadData(e)}}/> <div>this.state.a:{this.state.a}</div> <div>this.a:{this.a}</div> </div>  ) }

本来是应该去查看REACT的源码的,但碍于目前尚无读其源码的能力,所以只能在此依据现象进行推导; 如不正确,望斧正;

----------------------------2018,1,22-----勘误-----------------------

再次读此文,真是一派胡言;

上面之所以不会变,是因为this.a赋值为一个 基本数据类型  当然不会跟着state的改变而改变!

希望下次写博客自己可以强大些,不要误人子弟,也对自己没有任何帮助

(文章也有问题,请自行跳过)react中的状态机每次setState都是重新创建新的对象,如需取值,应该在render中处理。的更多相关文章

  1. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  2. WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...

  3. sqlserver 导入数据出现 无法创建 OLE DB 取值函数。请查看列元数据是否有效

    我用的是Sql Server 的导入导出功能来实现的,但是有些数据可以导进去,有些就不行.总是出现一些错误! 执行之前 (错误)消息错误 0xc0202005: 数据流任务: 在数据源中找不到列“Un ...

  4. ionic4 页面跳转传值和新页面取值

    页面跳转 : <ion-row *ngFor="let item of aboutData.stockData" [routerLink]="[ '/stock-d ...

  5. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  6. hexo创建新文章的正确方法

    起因 之前我一直是通过复制以前的文章的形式来创建一个新的文档,但是这一次似乎遇到了一些问题.我将文章写完之后,准备进行预览,输入hexo s命令.在预览页面却没有显示出新的文章,还是和之前的页面是一样 ...

  7. phpstudy 出现“请自行检查是否安装VC9运行库??”问题 -- 缺少vc9库

    phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...

  8. 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场

    判断终端的类型.安卓.ios.微信.qq function  GetMobelType()  {                 var  browser  =   {                 ...

  9. 请自行检查是否安装VC9运行库??

    phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...

随机推荐

  1. Tomcat启动内存设置

    Tomcat启动内存设置 Tomcat的启动分为startupo.bat启动和注册为windows服务的启动,下面一一说明. 1.startup.bat启动 在tomcat_home/bin目录下找到 ...

  2. sublime text3---Emmet:HTML/CSS代码快速编写神器

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  3. 在Ubuntu中增加root用户登录

    一:增加root用户登录 1.打开终端,输入:sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.在弹出的编辑框里输入:gree ...

  4. PostgreSQL 数据库错误代码解释

    PostgreSQL 服务器发出的所有消息都赋予了五个字符 的错误代码, 这些代码遵循 SQL 的 "SQLSTATE" 代码的习惯.需要知道发生了什么错误条件的应用通常应该测试错 ...

  5. Windows server 2008 R2 安装AD域证书

    参考文档: http://blog.51cto.com/gaowenlong/1969585 http://blog.51cto.com/gaowenlong/1969586 安装后打开证书颁发机构 ...

  6. Codeforces Round #555 (Div. 3) c2 d e f

    c2:Increasing Subsequence (hard version) 那边小取那边,然后相等比较后面的长度 #include<bits/stdc++.h> using name ...

  7. numpy 基本使用1

    Numpy是一个非常强大的库,具有大量线性代数以及大规模科学计算的方法. #-*- coding:utf-8 -*- import numpy as np #Numpy生成一维数组 a=np.arra ...

  8. Linux 系统计算文件夹下文件数量数目

    查看某目录下文件的个数(未包括子目录) ls -l |grep "^-"|wc -l 或 find ./company -type f | wc -l 查看某目录下文件的个数,包括 ...

  9. ES6-Iterator & for...of循环

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...

  10. golang---interface结合reflect的泛型应用

    大致思路:序列化未知json放入一个interface{}中再通过反射将其内容解析出来 str1:=`{ , , , , , , "type_key": "testnow ...