组件的三大属性之一:state属性
(1)组件被称为“状态机”,通过更新组件的状态值来更新对应的页面显示(重新渲染)。
1>初始化状态:
constructor(props){
super(props);
//初始化状态
this.state = {
stateProp1:value1,
stateProp2:value2
};
}
2>读取某个状态值:
this.state.statePropertyName
3>更新状态——>组件界面更新
this.setState({
stateProp1:value1,
stateProp2:value2
});
下面是一个小例子:
import React, { Component } from 'react';
class State extends Component{
constructor(props){
super(props);
//初始化状态
this.state = {
isLike:true
};
//改变changeLike的this指向
this.changeLike = this.changeLike.bind(this);
}
changeLike(){
//改变状态
this.setState({
isLike:!this.state.isLike
});
};
render(){
let {isLike} = this.state;
let msg = isLike?"I love you":"You love me";
return(
<h1 onClick={this.changeLike}>
{msg}
</h1>
)
}
}
export default State;