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去访问。