state的基本使用

状态(state)即数据,是组件内部的私有数据,只能在组件内部使用

state的值是对象,可以通过this.state来获取状态。

setState()修改状态

状态是可变的,可以通过this.setState({要修改的数据})来改变状态

注意:跟vue语法不同,不要直接修改state中的值,这时错误的!

//正确
 this.setState({
     count:this.state.count+1
 })
//错误
this.state.count+=1

最后结合以上内容,写了一个简单的累加器,但是在此之前,我们需要解决this在自定义的方法中的指向问题,否则this指向会为undefined,我们一般希望this指向组件实例。

解决方法:

1.箭头函数

 利用箭头函数自身不绑定this的特点

class App extends React.Component{
    state={
       count:0, 
    }
    render(){
        // 箭头函数中的this指向外部韩静,此处指向render()方法
        return (
            <div>
                <span>总数:{this.state.count}</span>
                <button onClick={()=>{
                    this.setState({
                        count:this.state.count+1
                    })
                }}>点击+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

但是这种方法会导致JSX语法中代码过于繁杂,不利于表明项目结构,一般不推荐使用。

2.Function.prototype.bind()

利用ES5中的bind方法,将事件处理程序中的this与组件示例绑定到一起

class App extends React.Component{
    constructor(){
        super()//super()必须写,这时ES6语法中class的一个要求
        //此时可将state放到constructor()中
        this.state={
            count:0, 
         }
        this.add=this.add.bind(this)//将this指向绑定到实例
    }
    //事件处理程序
    add(){
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        // 箭头函数中的this指向外部韩静,此处指向render()方法
        return (
            <div>
                <span>总数:{this.state.count}</span>
                <button onClick={this.add}>点击+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

3.class的示例方法

利用箭头函数形式的class实例方法,此方法比较简洁,强烈推荐

注意:该语法是实验性语法,但是由于脚手架中babel的存在,可以直接使用

class App extends React.Component{
    state={
        count:0, 
    }
    add=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    render(){
        // 箭头函数中的this指向外部韩静,此处指向render()方法
        return (
            <div>
                <span>总数:{this.state.count}</span>
                <button onClick={this.add}>点击+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注阿兔在线工具的更多内容!   

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部