00:00
好同学,我们继续接下来咱们讲最后一个比较常用的hak,叫做ref hak啊,回到我们的案例当中啊,我们首先呢,把这个函数式组件啊,我们给它注掉,好回到我们的类式组件里边,我提一个需求,就是在页面上呀,有一个input框,可以输入一些内容,然后点击按钮的能提示输入啊点击。提示数据啊,那就是show展示吧,那我们正常写就是给这个input是不是打一个ref呀?啊,那有三种对吧?同学们有字符串的,有回调的,还有什么呢?Ref容器,那么最新的一个是什么呢?是不是用那个ref容器呀?啊,那我们写一下咋写来着,大家还记得吗?首先呢,你得写一个复制语句,比如说叫做my con啊,这个ta my container也行,我的容器啊,或者在这来一个my ref,等于诶咋写来着?同学叫做react,这个内置的对象身上有一个create ref对吧?出来了my ref,然后怎么用啊,直接在这儿写,往里边存就得了,我这是不是得写意呀?
01:25
因为赋值语句嘛,是放在自身了,对吧?好了来接下来怎么办呀,点击这个show的时候是不是得展示啊,那就定义一个show的这个方法展示啊,那展示什么呢?来吧,this.my ref.current吧,啊得current才能拿到那个你存储的东西,然后是不是value啊啊来那提示一下,那就alert吧,直观一点啊,This点容器,点current.value啊来咱试试啊,回到页面刷新一下,输入一个123提示数据是不是可以啊,这是在类式组件里边可以写,哎,这种容器啊等等这些。
02:11
那么函数式组件里边怎么办呢?住掉,把函数打开,那就得用到一个人了,那个人就叫做use ref,回到我们的这个总结里边,嗯,在这儿呢,Use ref,来,我们写一写啊,这个就非常简单了,同学,你比如说cost定义一个叫做my ref,等于react点,这回不叫create ref了,这回叫做use ref,好走。容器是不是准备好了呀,那接下来非常简单了呀,在这儿直接写那个input框啊,那input框写个ref,呃,值呢,那就写刚才你那容器呗,说老师加个this a得函数是组件里边,它this是安范的,不能写在这直接就能找到它,那在这儿呢?那然后呢,再来一个按钮,叫做点我提示数据啊,那这叫什么名字叫show展示呗,那所以说再来一个function,这叫做show,写好注释提示。
03:20
输入的,哎,这个回调啊,写吧,叫做show,这里边呢,那跟之前的写法是一样的了,Alert你得弹出来,弹出谁呢?My ref.current.value同样也能拿到东西啊,我们试试啊,回到页面刷新一波,输入123提示数据是不是也是可以的呀,OK。啊,那说到这儿呢,同学我们就把三个比较常用的HK呢,就都给大家说了一下啊,那这个呢,其实觉不觉得这个用法啊,同学和那个create ref太像了呀啊来吧,回到我们的hawk,总结最后一个ref hak。
04:05
啊,可以在函数组件中存储或者查找,查找什么呢?组件标签的,呃,或者是任意的一些其他数据啊,也就是说在这里边呢,它可以构建一个容器,你想存啥都可以往里面存,但是跟那个之前的create ref呢是一样的啊,各位专人专用,不允许你存多个啊,保存标签对象或者我们说的保存节点功能与react点,你看create ref是不是一样啊,诶好了,那这小节呢,我们听一下我们讲的是ref HK。
我来说两句