React技术栈-组件三大属性之state

　　　　　　　　　　　　　　React技术栈-组件三大属性之state

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.组件的state属性概述

　　state是组件对象最重要的属性, 值是对象(可以包含多个数据)

　　组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

 

二.state实战案例

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件三大属性之state</title>
    </head>
    <body>
        <div id="box1"></div>
    </body>
    
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        //1>.定义组件
        class Like extends React.Component{
            constructor(props){
                super(props);
                //初始化状态
                this.state = {
                    isLikeMe:false
                }
                
                //将新增的方法中的"this"强制绑定为组件对象
                this.handleClick = this.handleClick.bind(this);
            }
            
            //重写组件类的方法
            render(){
                //解构方式读取状态
                const {isLikeMe} = this.state;
                return <h1 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'I Love You'}</h1>
            }
            
            //新添加方法:内部的this默认不是组件对象，而是"undefined"
            handleClick(){
                //得到当前状态并取反
                const isLikeMe = !this.state.isLikeMe;
                //更新状态
                this.setState({isLikeMe})                
            }
        }
        
        //2>.渲染组件标签
        ReactDOM.render(<Like />,document.getElementById("box1"))
    </script>
</html>

2>.浏览器打开以上代码渲染结果

如上图所示，点击标签，网页内容发生变化，如下图所示。

 

posted @ 2019-12-23 23:41  尹正杰  阅读(284)  评论(0)  编辑  收藏  举报