(文章也有问题,请自行跳过)react中的状态机每次setState都是重新创建新的对象,如需取值,应该在render中处理。
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中处理。的更多相关文章
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...
- WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...
- sqlserver 导入数据出现 无法创建 OLE DB 取值函数。请查看列元数据是否有效
我用的是Sql Server 的导入导出功能来实现的,但是有些数据可以导进去,有些就不行.总是出现一些错误! 执行之前 (错误)消息错误 0xc0202005: 数据流任务: 在数据源中找不到列“Un ...
- ionic4 页面跳转传值和新页面取值
页面跳转 : <ion-row *ngFor="let item of aboutData.stockData" [routerLink]="[ '/stock-d ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- hexo创建新文章的正确方法
起因 之前我一直是通过复制以前的文章的形式来创建一个新的文档,但是这一次似乎遇到了一些问题.我将文章写完之后,准备进行预览,输入hexo s命令.在预览页面却没有显示出新的文章,还是和之前的页面是一样 ...
- phpstudy 出现“请自行检查是否安装VC9运行库??”问题 -- 缺少vc9库
phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...
- 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场
判断终端的类型.安卓.ios.微信.qq function GetMobelType() { var browser = { ...
- 请自行检查是否安装VC9运行库??
phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...
随机推荐
- 剑指offer五十之数组中重复的数字
一.题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...
- 剑指offer二十三之二叉搜索树的后序遍历序列
一.题目 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 二.思路 1.二叉搜索树又称二叉排序树(Binar ...
- (转) rabbitmq应用场景
原文:http://blog.csdn.net/wangpengblog/article/details/76405598
- android开发 gradle 总结
gradle结构: MyApp ├── build.gradle ├── settings.gradle └── app └── build.gradle 1. setting.gradle解析 当你 ...
- spring boot启动加载数据
实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求.为了解决这样的问题,spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunner 来实 ...
- databinding在android studio2.3版本后不再默认支持使用
databinding在android studio2.3版本后不再默认支持使用,需要在项目的app-build-gradle的 dependencies 里面添加 apt 'com.android. ...
- Mysql 断电数据损毁恢复
error log: Database page corruption on disk or a failed 处理: /etc/my.cnf 设置 innodb_force_recovery = 6 ...
- 解惑《你必须知道的.net》——C#继承关系中【方发表】的创建和调用
前言: 现在正在读<你必须知道的.net>(第二版)一书,看到IL语言那一章,将call.callvirt和calli时候,书中举了一个例子,是一个三层继承的例子,我一开始看的时候就有点懵 ...
- android学习-Toast的延迟时间
一般显示Toast都是一条语句够了 Toast.makeText(Context context, CharSequence text, int duration) Context是要显示Toast的 ...
- wordcloud+jieba
Wordcloud各参数含义 font_path : string #字体路径,需要展现什么字体就把该字体路径+后缀名写上,如:font_path = '黑体.ttf' width : int (de ...