浅谈react中的state和ref
2019-11-05 本文已影响0人
亦晓寒
相信大家对react框架都有了解啦,接下来我们切入正题讲一下我在项目中所遇到的关于state和ref的总结。
1.state
state是状态管理,每次我们需要变更状态时,需要用setState方法来变更。在此之前,我在react中定义任意一个变量,然后通过改变这个变量来记录。

我是通过这个变量来控制className来改变一个部分的背景样式,之前遇到很多类似这样的问题,发现通过其他的变量都不行,变量的值变了,但是效果并不能实现,只能在state中定义才可以实现,后来查了资料并看了官方文档,才发现我对state这个并没有理解,由于背景颜色会变化,这是需要重新触发render函数渲染页面,用setState改变state的状态正好可以重新渲染触发render函数。
2.ref
查了很多资料,对ref这个解释最多的就是操作dom,还是不是很理解,但是后来通过自己去观察,去学习,对ref有了一点点理解。
ref使用在普通的标签上,就是拿到了这个标签元素。



如果ref作用在组件上,对组件进行实例化,可以操纵组件,调用组件内部封装的一些函数。但是注意的是,函数组件不可以使用ref,因为函数组件没有实例。



这些纯粹是我自己做工作过程中对这些的理解啦,也不一定完全正确,希望大家批评指正啦!