对state的理解
state是组件实例的三大核心之一
- state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
- 组件被称为“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件)
强烈注意:
1、组件中render方法中的this为组件实例对象
2、组件自定义的方法中this为undefined,如何解决?
a、强制绑定this通过函数对象的bind()
b、箭头函数
c、class的实例方法
3、状态数据不能直接修改。
初始化state
通过一个切换来了解State
import React from 'react';
export default class State extends React.Component{
constructor(props){
super(props)
//创建state
this.state={
isHot:true
}
//通过bind()结果this指向undefined的问题
//this.Upstate=this.Upstate.bind(this)
}
Upstate(){
console.log(this.state.isHot);
let a=this.state.isHot
//更改state中的值必须使用setState()更改。
this.setState({isHot:!a})
}
render(){
return (
//方法二通过箭头函数解决this指向undefined的问题
<div onClick={()=>this.Upstate()}>
<h1>今天很{this.state.isHot? '热' : '凉快'}</h1>
</div>
)
}
}
一、创建state
方式一:
this.state={}
方式二:
state={}
二、this指向问题
箭头函数的方法
bind的方法
constructor(props){
super(props)
this.state={
isHot:true
}
this.Upstate=this.Upstate.bind(this)
}