React组件三大属性之state
React组件三大属性之state
组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
理解
1) state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
编码操作
1) 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
2) 读取某个状态值
this.state.statePropertyName
3) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
/*
需求: 自定义组件, 功能说明如下
1. 显示h2标题, 初始文本为: 你喜欢我
2. 点击标题更新为: 我喜欢你
*/
//1、定义组件
class Like extends React.Component {
//初始化状态
constructor (props) {
super(props)
this.state = {
isLikeMe:false
}
//将新增的方法中的this强制绑定为组件对象,
//bind 返回新的函数
this.handleClick = this.handleClick.bind(this)
}
//新添加的方法this默认不是组件对象，而是undefined
handleClick(){
// 更新状态
const isLikeMe = !this.state.isLikeMe
this.setState({isLikeMe})
}
render() {
//根据状态获取结果
const text = this.state.isLikeMe ? '你喜欢我' : '我喜欢你'
return <h2 onClick={this.handleClick}>{text}</h2>
}
}
//2、渲染组件标签
ReactDOM.render(<Like/>,document.getElementById('test')) </script>
</body>
</html>
React组件三大属性之state的更多相关文章
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React组件的属性
组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...
- 08_组件三大属性(2)_props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 09_组件三大属性(3)_refs和事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 07_组件三大属性(1)_state
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- 组件的三大属性state，props，refs与事件处理
组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...
随机推荐
- Kubeedge Edged概述
Kubeedge Edged概述 Overview EdgeD是管理节点生命周期的边缘节点模块.它可以帮助用户在边缘节点上部署容器化的工作负载或应用程序.这些工作负载可以执行任何操作,从简单的远程遥测 ...
- 如何在GPU上优化卷积
本文将演示如何在TVM中编写高性能的卷积实现.以平方大小的输入张量和滤波器为例,并假设卷积的输入量很大.使用不同的布局来存储数据,以实现更好的数据局部性.缓冲区布局为HWCN,代表高度,宽度,通道,批 ...
- 初具雏形的UL标准侧重于自主车辆的安全性
初具雏形的UL标准侧重于自主车辆的安全性 Nascent UL standard focuses on autonomous vehicle safety 就任何自主汽车(AV)的安全性进行可信的争论 ...
- 35 张图带你 MySQL 调优
这是 MySQL 基础系列的第四篇文章,之前的三篇文章见如下链接 138 张图带你 MySQL 入门 47 张图带你 MySQL 进阶!!! 炸裂!MySQL 82 张图带你飞 一般传统互联网公司很少 ...
- 解决redis集群版本不一致导致RDB同步失败的问题
某天,运维反馈某两个机房的出口流量和入口流量过大,并且持续了好一段时间. 再仔细排查后发现是 redis 集群的几台服流量问题,于是开始查日志. 在日志中发现出现大量的 Can't handle RD ...
- 三、DNS子域授权
前提:准备两台虚拟机:父域: www.tedu.cn(虚拟机A)子域:www.bj.tedu.cn(虚拟机B) 一.在两台虚拟机上安装域名解析软件 root@pc207 ~]# yum -y inst ...
- 【NX二次开发】导出x_t、导入x_t例子，UF_PS_export_data、UF_PS_import_data
获取blockUI 体收集器选择的体,导出x_t: std::vector<TaggedObject*>objects = bodySelect0->GetSelectedObjec ...
- 为什么有些公司的IT很乱？
--别问,问就是赛马,问就是KPI驱动 为什么很多公司甚至是闻名遐迩的资深IT公司,都被吐槽IT技术建设很烂呢?按惯例,问为什么之前,先问是不是. ▒壹·鹅厂▒ 2018年一个名为"当下腾讯 ...
- 『心善渊』Selenium3.0基础 — 3、使用Selenium操作浏览器对象的基础API
目录 1.导入Selenium库 2.创建浏览器对象 3.浏览器窗口大小设置 4.浏览器位置设置 5.请求访问网址 6.浏览器页面前进.后退和刷新 7.关闭浏览器 相比于高大上的各种Selenium进 ...
- [源码解析] 深度学习分布式训练框架 horovod (6) --- 后台线程架构
[源码解析] 深度学习分布式训练框架 horovod (6) --- 后台线程架构 目录 [源码解析] 深度学习分布式训练框架 horovod (6) --- 后台线程架构 0x00 摘要 0x01 ...