React组件中的state和setState如何使用

本篇内容主要讲解“React组件中的state和setState如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React组件中的state和setState如何使用”吧!

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'));

到此，相信大家对“React组件中的state和setState如何使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！