react知识点增强之setState,this,ref

674 阅读2分钟

复习之前的知识点,增强知识点的使用与适用。

路过的朋友,可以点个赞,关注一下~~~

1. react之setState的应用

setState主要是用来修改state中的状态的,当使用setState来修改state中的状态的时候,但是state中的数据不会立即改变,还是原先的值,主要是因为setState相当于一个异步操作,不能立即被修改。

普通的使用方式

enter description here

这种使用方式,不能立即的获取到修改后的数据,操作属于异步操作。

回调函数使用方式 setState可以写两个参数,第一个是修改数据,第二个参数是一个回调函数 enter description here

接收对象式使用 setstate接收一个回调函数,而不是一个对象,这个回调函数有两个参数,一个是接收前一个状态值作为第一个参数,并将更新后的值作为第二个参数

enter description here

注意:由于setState可能是一个异步操作,所以当一次性的多次更新,内部会将所有的更新合并为一个更新,合并成最后一个的更新。

2. react中的this的指向问题

react中的组件主要分为两种,一种是有状态组件,一种是无状态组件,this只会出现在有状态组件中,无状态组件中没有this,官方建议尽量使用无状态组件,

在有状态组件中(类组件),有以下三种方式,可以是的使得this指向当前的组件

第一种

使用箭头函数(里面没有this,会向外找--当前组件)

enter description here

注意:箭头函数里面没有this,会向上一级找this。若该函数为普通的函数,则内部的this的值是undefine

第二种

可以使用外部干预的方式,当调用函数的时候,手动的进行绑定this

enter description here

注意:当使用bind手动绑定this的时候,函数可以是箭头函数,也可以是普通的函数

第三种

在调用的时候,可以使用匿名函数的方式,这样也可以使this指向当前的组件

enter description here

3. ref与refs的使用方式

ref与refs是一对,可以获取到当前的组件或者元素标签等,ref负责定义数据,refs负责获取数据,共有三种使用方式:

方式一

直接使用ref起名字,利用this.refs.xxx来获取 enter description here

方式二

利用ref函数的方式,原理:将当前真实的dom挂载到当前的组件上, enter description here

方式三

使用react创建一个ref对象的方式,原理:先创建一个ref对象,在dom对象中使用,之后再进行获取 enter description here

示例: enter description here