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>
