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

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

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

    state的基本使用

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

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

    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的特点

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

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

    2.Function.prototype.bind()

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

    classAppextendsReact.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><buttononClick={this.add}>点击+1</button></div>)}}ReactDOM.render(<App/>,document.getElementById('root'));

    3.class的示例方法

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

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

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

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

    发布于 2022-03-18 22:47:37
    收藏
    分享
    海报
    0 条评论
    36
    上一篇:C语言如何实现会员管理系统 下一篇:Java并发编程如何创建并运行线程
    目录

      0 条评论

      本站已关闭游客评论,请登录或者注册后再评论吧~

      忘记密码?

      图形验证码