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. 使用win10自带邮件应用发送文件

    之前的电脑装过邮件客户端,想发送文件给别人时,只需要“右键文件——发送到邮件”,就能把文件作为附件发送给对方.新电脑win10系统自带邮件客户端,所以就想直接用.但是右键发送到邮件没有关联上,用不了. ...

  2. execvp php-fpm reload使用的函数

    php重启 本质上是调用 execvp("/usr/local/php/sbin/php-fpm"); execvp就是用一个新的进程把自己替换掉,一个进程一旦调用exec类函数, ...

  3. 解决git commit 遇到datached HEAD问题

    git detached HEAD 你可以认为 HEAD(大写)是”current branch”(当下的分支).当你用git checkout切换分支的时候,HEAD 修订版本重新指向新的分支. 有 ...

  4. POJ 2370

    //我的解题思路是先把输入的含有n个元素的数组a排序(从小到大),然后对前(n+1)/2个元素作如下的处理, //s+= (a[i]+1)/2 #include <iostream> #i ...

  5. POJ 1051

    #include <iostream> #include <algorithm> #include <string> #define MAXN 27 using n ...

  6. 原生JavaScript的DOM操作方法总结

    什么是DOM? DOM即文档对象模型,Document Object Model.  是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从 ...

  7. 0day发布网站[转载]

    1.中文版http://www.wooyun.org/index.php2.中文版http://www.sitedirsec.com/3.http://www.sebug.net/ http://ww ...

  8. 【数组】Next Permutation

    题目: Implement next permutation, which rearranges numbers into the lexicographically next greater per ...

  9. Virtualbox下载与安装步骤

    不多说,直接上干货! 本主主要介绍一下如何从官方网站下载正版的 虚拟化 Oracle VM VirtualBox ,以及说明一下去官方下载正版软件的重要性. 一.为了系统的稳定以及数据的安全,建议下载 ...

  10. zookeeper基础知识

    Zookeeper简介 ZooKeeper设计目的 最终一致性client不论连接到哪个Server,展示给它都是同一个视图,这是zookeeper最重要的性能. 可靠性具有简单.健壮.良好的性能,如 ...