组件的state属性

组件的三大属性之一：state属性

（１）组件被称为“状态机”，通过更新组件的状态值来更新对应的页面显示（重新渲染）。

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;