React三大属性之一——state 属性
时间:2021-10-11
本文章向大家介绍React三大属性之一——state 属性,主要包括React三大属性之一——state 属性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
组件实例三大核心属性1:state
1.定义
1. state 是组件对象最重要的属性,值是对象(可以包含多个key-value)
2. 组件被称为"状态机",通过更新组件的 state 来更新对应的页面显示(重新渲染组件)
2. 注意
1. 组件中 render 方法中的 this 为组件实例对象
2. 组件自定义的方法中 this 为 undefined,如何解决?
1. 强制绑定 this:通过函数对象的 bind()
2. 箭头函数
3. 状态数据,不能直接修改或更新:使用React.component上的 setState() 方法对数据进行更新
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type='text/babel'>
// 1.创建组件
class Weather extends React.Component {
// 构造器调用几次?——1次
constructor(props) {
super(props)
// 初始化状态
this.state = {isHot: true}
// 解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
// render调用几次? ——1+n次 1是初始化,n是状态更新的次数
render() {
// 读取状态
const {isHot} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
}
changeWeather() {
// changeWeather放在哪里? ——Weather的原型对象上,供实例使用
// 由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用
// 类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
console.log(this)
const isHot = this.state.isHot
// 严重注意:状态必须通过setState进行更新,且更新是一种合并,不是替换。
this.setState({isHot: !isHot})
// 严重注意:状态(state)不可直接更改,下面这行就是直接更改!!
// this.state.isHot = !isHot // 错误的写法
}
}
// 2. 渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
上面代码有一些繁琐,我们来简化一下:
<script type='text/babel'>
// 1.创建组件
class Weather extends React.Component {
state = {isHot:false, wind: '微风'}
render() {
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
changeWeather = () => {
const isHot = this.state.isHot
this.setState({isHot: !isHot})
}
}
// 2. 渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
原文地址:https://www.cnblogs.com/bulu08042/p/15391456.html
- python接口自动化3-自动发帖(session)
- 平面上给定n条线段,找出一个点,使这个点到这n条线段的距离和最小。
- python接口自动化4-绕过验证码登录(cookie)
- 洛谷P1313 计算系数【快速幂+dp】
- python接口自动化5-Json数据处理
- Numpy教程第1部分 - 阵列简介(常用基础操作总结)
- Session和Cookies的基本原理
- 浅析Numpy.genfromtxt及File I/O讲解
- 损失函数详解
- 排查Java的内存问题
- 使用两种方法让 ASP.NET Core 实现遵循 HATEOAS 结构的 RESTful API
- 设计模式六大原则(5):迪米特法则
- Selenium2+python自动化61-Chrome浏览器(chromedriver)
- 区块链可以减少社会不平等吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 内网渗透 | 内网中的信息收集
- 通过命令下载执行恶意代码的几种姿势
- CS如何配置通过CDN上线
- Height transition
- 【DB笔试面试861】在Oracle中,有哪些常见组件?
- 【DB笔试面试862】在Oracle中,如何安装DBMS_NETWORK_ACL_ADMIN包?
- 【DB宝19】在Docker中使用MySQL高可用之MHA
- 【DB笔试面试863】在Oracle中,如何让Oracle DB、监听和oem开机启动?
- 【DB笔试面试864】在Oracle中,响应文件在什么位置?
- 设计模式几大原则
- Thrift使用教程(Java版本)
- C语言实现三子棋
- C语言操作符
- 一级指针、二级指针、指针和数组、指针数组总结
- C++入门知识(一)