react 修改组件状态

react与vue不同,不会去监听数据得变化,也就不会因为数据改变去更新视图

react解决方案:提供了setState方法(修改state,更新UI)

传一个对象,key为你要修改的数据名称,value为你想改成的新值

tips:num++与num+1的区别

num++ ---> num = num + 1 意味着修改了原数据num的值,

num+1 并没有修改原数据的值

注意:react中的状态不可变!

但凡会修改原数据的操作都是不可取的,无论是简单数据类型,还是复杂数据类型!

对setState中的value操作绝不能引起对原数据的修改

如果在函数中如上图对状态直接赋值,状态的值实际已经改变,但不会去驱动视图更新,因此需要调用setState方法,修改数据,同时更新UI

如state中包含{conut:1,user:{name:'zs',age:18},list:['a', 'b', 'c']}

简单数据类型count可再setState中重新定义该属性,并赋值:

this.setState({count:2})

复杂数据类型,则需要先展开运算符,之后添加自己想要的key和value

this.setState({...this.state.user , name:20})

想去掉list中的b:this.setState({this.state.list.filter((item) => item !== 'b')})

setState从哪里来? 从react.Component中继承而来。因此,我们自定义的组件,必须继承Component从而继承Component中的所有方法,然后用this去访问。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值