react中的state详解

state

理解:state是组件对象最重要的属性,值是对象(可以包含多个key—value组合)

state中的值可以修改,修改的唯一方法是调用this.setState,每次修改以后,自动调用 this.render 方法,再次渲染组件。(也就是说直接this.state.num=2这样直接修改值是无效的)
state在组件的构造函数中赋值

  class View extends Component{constructor(){super();this.state={num:10}}//state={num:10} 直接做为实例属性也可以} 

setState有两种格式

  • 传一个对象

直接修改state的值
因为 this.props 和 this.state 可能会异步更新,所以不能依赖他们的值来更新下一个状态。解决办法让 setState() 接收一个函数

  this.setState({})
  • 传一个函数

接收两个参数preState,props
更新前的state,更新后的props

修改state自身的值(例:state.num+4)

// 传函数的两种写法
// 普通函数this.setState(function(state,props){return {num:state.num--}})
// 箭头函数this.setState((state,props)=>({num:state.num}))

遍历state的值,循环渲染页面

list(){return this.state.lists.map((v,i)=>(<li key={i}>{v}</li>))
}
//直接在dom中渲染即可(因为render会执行两次,所以要进行简单的处理)
<ul>{this.state.lists.length!==0:this.list():'';}</ul>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apsara Stack 技术百科 | 数字化业务系统安全工程

简介&#xff1a;数字化平台已经与我们生活紧密结合&#xff0c;其用户规模庞大&#xff0c;一旦系统出现故障&#xff0c;势必会造成一定生活的不便。比如疫情时代&#xff0c;健康码已经成为人们出门必备的条件&#xff0c;一旦提供健康码服务平台出现故障&#xff0c;出行将…

支撑百万级传感器的延时队列

文/升哲科技 刘鹏 摘要&#xff1a;本文主要描述升哲科技在打造物联智慧城市平台过程中关于如何实现延时队列服务的技术选型经验、延时队列服务的架构设计以及延时队列的底层细节实现原理。 背景 升哲科技是一家物联网与人工智能领域的国家高新技术企业、独角兽企业。 要打…

深度解析|基于 eBPF 的 Kubernetes 一站式可观测性系统

简介&#xff1a;阿里云 Kubernetes 可观测性是一套针对 Kubernetes 集群开发的一站式可观测性产品。基于 Kubernetes 集群下的指标、应用链路、日志和事件&#xff0c;阿里云 Kubernetes 可观测性旨在为 IT 开发运维人员提供整体的可观测性方案。 作者&#xff1a;李煌东、炎…

系列解读SMC-R:透明无感提升云上 TCP 应用网络性能(一)| 龙蜥技术

简介&#xff1a;已有的应用若想使用RDMA技术改造成本高&#xff0c;那么有没有一种技术是不做任何改造就可以享受RDMA带来的性能优势&#xff1f; 文/龙蜥社区高性能网络SIG 引言 Shared Memory Communication over RDMA (SMC-R) 是一种基于 RDMA 技术、兼容 socket 接口的内…

技术引领未来, IDC TechScape中国数据安全发展路线图首发

2022年8月26日&#xff0c;IDC 2022 CSO全球网络安全峰会&#xff08;中国站&#xff09;在上海隆重开幕&#xff0c;会上首次发布《IDC TechScape&#xff1a;中国数据安全发展路线图&#xff0c;2022》。报告认为&#xff0c;帮助用户构建全方位数据安全治理体系将成为大趋势…

DataV 3D 平面地图 2.0 焕新上线

简介&#xff1a;DataV3月&#xff0c;3D平面地图2.0现已上线~ 3D 平面地图 2.0 现已上线~ 让我们来看看更新了哪些功能吧&#xff01; 01 交互升级&#xff0c;省市区自由下钻 自带行政区域数据&#xff0c;无需配置&#xff1a; 甚至&#xff0c;可以通过「蓝图编辑器」实…

jsx详解

1、全称&#xff1a;javaScript XML 2、react定义的一种类似于XML的JS扩展语法&#xff1a;js XML 更高效创建虚拟DOM 3 语法规则&#xff1a; 定义虚拟DOM时&#xff0c;不要写引号。标签中混入JS表达式时要用{}样式的类名指定不要用class&#xff0c;要用className。style…

PolarDB-X 发布 2.1.0 版本,Paxos 开源

简介&#xff1a;2022年4月1号&#xff0c;PolarDB-X 正式开源X-Paxos&#xff0c;基于原生MySQL存储节点&#xff0c;提供Paxos三副本共识协议&#xff0c;可以做到金融级数据库的高可用和容灾能力&#xff0c;做到RPO0的生产级别可用性&#xff0c;可以满足同城三机房、两地三…

828成首个B2B企业节,华为联合3万生态伙伴助力中小企业数字化转型

中小企业既是市场的主体&#xff0c;也是保就业的主力军。截至2021年末&#xff0c;中小企业在全国企业中数量占比已超过99%&#xff0c;并贡献了80%的就业机会。 为助力中小企业创新发展&#xff0c;8月28日&#xff0c;华为联合3万家生态伙伴&#xff0c;共同发起了全国首个…

阿里云贾扬清:数据湖正成为企业数据应用创新标配

简介&#xff1a;全球数据湖峰会开幕 数字经济蓬勃发展的今天&#xff0c;越来越多的用户已经从“上好云”&#xff0c;走到了“用好云”的这个阶段。如果说在“上好云这个阶段&#xff0c;大多数用户关心的是如何在成本上获得更好的回报。那么在上好云这个阶段&#xff0c;更…

axios.post提交的三种请求方式

1、Content-Type: application/json let data {“username”:“11111”,“password”:“22222”}; axios.post(“地址”,data) 2、Content-Type:multipart/form-data let data new FormData(); data.append(‘username’,‘11111’); data.append(‘password’,‘22222’)…

强强联手,NVIDIA 与 Ampere Computing 重磅推出云原生服务器平台

随着 5G、元宇宙的兴起&#xff0c;云游戏再一次迎来爆发。据 IDC 与中国信息通信研究院联合发布的《全球云游戏产业深度观察及趋势研判&#xff08;2022年&#xff09;》显示&#xff0c;2021年&#xff0c;中国地区云游戏市场收入已达 40.6 亿元&#xff0c;同比增长 93.3%。…

有了这款工具,定位线上问题事半功倍|云效工程师指北

简介&#xff1a;有了这款工具&#xff0c;定位线上问题事半功倍&#xff0c;程序员在日常工作中经常会遇到一些线上问题需要排查&#xff0c;本文的主人公程序员小张也不例外。但排查的过程却时常令他困扰不已。让我们一起看看他遇到了哪些问题&#xff0c;又是怎么解决的。 …

简单的二次封装axios中的get,post方法

function Axios(type, url, data, header) {/*** 参数:* 1、type:调用axios的方法&#xff08;get&#xff0c;post……&#xff09;* 2、url:请求地址* 3、data:传的参数* 4、header请求头*/// 这里处理type大小写type type.toLocaleLowerCase()switch (type) {case (get…

云原生时代如何用 Prometheus 实现性能压测可观测-Metrics 篇

简介&#xff1a;可观测性包括 Metrics、Traces、Logs3 个维度。可观测能力帮助我们在复杂的分布式系统中快速排查、定位问题&#xff0c;是分布式系统中必不可少的运维工具。 作者&#xff1a;拂衣 什么是性能压测可观测 可观测性包括 Metrics、Traces、Logs3 个维度。可观测…

基于 KubeVela 的机器学习实践

简介&#xff1a;本文主要介绍如何使用 KubeVela 的 AI 插件&#xff0c;来帮助工程师更便捷地完成模型训练及模型服务。 作者&#xff1a;KubeVela 社区 在机器学习浪潮迸发的当下&#xff0c;AI 工程师除了需要训练、调试自己的模型之外&#xff0c;还需要将模型进行部署上…

Gartner发布2022年云平台服务技术成熟度曲线,iPaaS、低代码将达到成熟期

Gartner 2022年云平台服务技术成熟度曲线显示&#xff0c;集成平台即服务&#xff08;iPaaS&#xff09;和低代码应用平台&#xff08;LCAP&#xff09;技术将在不到两年的时间内达到生产成熟期&#xff08;Plateau of Productivity&#xff09;。 编辑 | 宋慧 供稿 | Gartner…

sass封装h5适配文件

charset "UTF-8"; /** 使用方法 include keyframes(anMeinv,(0%:(background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),background-size: pxToRem(165) pxToRem(157)),50%:(background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),backgrou…

OpenKruise v1.1:功能增强与上游对齐,大规模场景性能优化

简介&#xff1a;在 v1.1 版本中&#xff0c;OpenKruise 对不少已有功能做了扩展与增强&#xff0c;并且优化了在大规模集群中的运行性能。以下对 v1.1 的部分功能做简要介绍。 作者&#xff1a;酒祝&#xff08;王思宇&#xff09; 云原生应用自动化管理套件、CNCF Sandbox …

贼喊捉贼?“盗版”软件开发者向 GitHub 投诉被侵权

整理 | 于轩 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;拥有超过2亿个代码存储库&#xff0c;由8000多万用户共享&#xff0c;GitHub已然成为世界上最大和最先进的开发平台。 与其他托管用户生成内容的平台一样&#xff0c;这个庞大的代码库经常会接到版权…