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>