react组件中的状态(state)

责编:menVScode 2017-06-18 0:46 阅读(762)

        一般在页面中存在状态的变化,涉及到与状态相关的东西的时候会用state。组件的状态根据不同的状态显示不同的UI界面。getInitialState:初始化状态。setState:更新状态。

var Demo = React.createClass({
    // 设置初始的状态
    getInitialState:function(){
        return{
            // 这里的值可以是一个boolean,string,function
            onOff:true
        }
    },
    doClick:function(){
        // 通过点击事件来修改状态值,原来的状态值需要使用this.state获取
        this.setState({
            onOff:!this.state.onOff
        })
    },
    render:function(){
        // 每一个更新状态的时候,这个render函数都会重新被调用
        return <div onClick={this.doClick}>{this.state.onOff ? '内容111' : '内容222'}</div>
    }
})
ReactDOM.render(
    <Demo/>,document.getElementById('app')
)

        上面代码展现的效果是,点击div根据onOff的状态,然后显示不同的内容。

        其中,getInitialState函数是设置初始的状态机,可以返回布尔值,字符串,函数等。我们可以通过事件来改变原来的状态,这是要用到setState方法。最重要的一点是每更新一个状态的时候,render函数都会重新被调用一次。

        

var Demo = React.createClass({    // 设置初始的状态// 设置默认的属性
    getDefaultProps: function(){
        return {
            content: '现在的时间:'
        }
    },
    getInitialState:function(){
        return{
            time: new Date().toLocaleTimeString()
        }
    },
    showTime:function(){
        var _this = this; 
        setInterval(function(){
            _this.setState({
                time: new Date().toLocaleTimeString()
            })
        },1000)
        
    },
    render:function(){
        return <div onClick={this.showTime()}>{this.props.content}{this.state.time}</div>
    }
})
ReactDOM.render(
    <Demo/>,document.getElementById('app')
)

        上面代码实现的效果是时间的显示:现在的时间:上午12:52:38。

属性与状态的对比

        1、都是纯JS对象,使用{}创建的对象

        2、都会触发render跟新

        3、都具有确定性,给定相同的属性或者是相同的状态,结果是相同的

QQ截图20170618005718

属性与状态的区分

        组件在运行时需要修改的数据就是状态;

         所有的数据都可以变成状态;

标签: react reactjs state
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码