复习之前的知识点,增强知识点的使用与适用。
路过的朋友,可以点个赞,关注一下~~~
1. react之setState的应用
setState主要是用来修改state中的状态的,当使用setState来修改state中的状态的时候,但是state中的数据不会立即改变,还是原先的值,主要是因为setState相当于一个异步操作,不能立即被修改。
普通的使用方式
这种使用方式,不能立即的获取到修改后的数据,操作属于异步操作。
回调函数使用方式
setState可以写两个参数,第一个是修改数据,第二个参数是一个回调函数
接收对象式使用
setstate接收一个回调函数,而不是一个对象,这个回调函数有两个参数,一个是接收前一个状态值作为第一个参数,并将更新后的值作为第二个参数
注意:由于setState可能是一个异步操作,所以当一次性的多次更新,内部会将所有的更新合并为一个更新,合并成最后一个的更新。
2. react中的this的指向问题
react中的组件主要分为两种,一种是有状态组件,一种是无状态组件,this只会出现在有状态组件中,无状态组件中没有this,官方建议尽量使用无状态组件,
在有状态组件中(类组件),有以下三种方式,可以是的使得this指向当前的组件
第一种
使用箭头函数(里面没有this,会向外找--当前组件)
注意:箭头函数里面
没有this,会向上一级找this。若该函数为普通的函数,则内部的this的值是undefine
第二种
可以使用外部干预的方式,当调用函数的时候,手动的进行绑定this
注意:当使用
bind手动绑定this的时候,函数可以是箭头函数,也可以是普通的函数
第三种
在调用的时候,可以使用匿名函数的方式,这样也可以使this指向当前的组件
3. ref与refs的使用方式
ref与refs是一对,可以获取到当前的组件或者元素标签等,ref负责定义数据,refs负责获取数据,共有三种使用方式:
方式一
直接使用ref起名字,利用this.refs.xxx来获取
方式二
利用ref函数的方式,原理:将当前真实的dom挂载到当前的组件上,
方式三
使用react创建一个ref对象的方式,原理:先创建一个ref对象,在dom对象中使用,之后再进行获取
示例: