ref基础

众所周知，React中有三大核心属性：state、props、ref

      但是这三种属性所使用的场合并不相同，

        总结下来，state更偏向于存储；

                          prop更偏向于传递；

                          ref更适用于表单中的收集数据；

        虽然三者所使用的情况不同，但殊途同归--为了更方便的传递参数

前两者我们暂时不提，主要来介绍让人兴奋又痛苦的ref

（这里我们省去繁杂的概念，直接通过一个栗子去走近ref）：

代码部分：

       

                part1：这里直接执行，并点击写着"打印对象-初级版本"的按钮，查看结果

        在这里我们可以清楚的看到，state、props、ref同时存在，只不过均为空--因为我们没有向内部写入值

        有的朋友可能会问，为什么执行结果中有一个名字为"Log"的存在---这里我们引入C语言中的概念：object与class:

        简单来说，在C语言中，一个object中含有多个class：可以理解为对于一个“对象”（object)而言，他有许多特点，而这些特点均以“类”（class）的形式存在，并存储在该对象中（类似于数组与其中所存储的数据的关系）

        而现在，由于我们所写的是类组件--等价于object（关于类组件的定义，请查询React官网，里面有更加官方的解释）；而类组件中的各个部分--等价于class

        也就是说，我们向名字为Who的object内，存入了各种class（每一个块相当于一个class），只不过class中存储的数据形式更加复杂罢了

        打印组件时，会显示其中的任何内容（与打印数组时，所有数组所存储的内容均会显示在屏幕上类似）

        part2：接下来解封"<button ref="refs">refs-first</button>"，再次执行该程序，并点击写着"打印对象-初级版本"的按钮，查看有什么不同

         这里我们使用的是字符串形式的ref，从结果来看，refs中写入了数据--名字为refs的按钮

          实际上，我们也可以这样去理解：我们在名为refs中的对象内，添加了一个key为"refs"（我们前方所定义的名字，见ref="refs"）,但是value为button 

        我们也可以通过object.class的方式，去查找refs中的button--只不过我们这一次需要多深入几层

                   

part3：接下来解封" <button ref={(c)=>{this.buttonsecond=c}}>refs-second</button>"，再次执行该程序，并点击写着"打印对象-初级版本"的按钮，查看有什么不同

        这里我们是用箭头函数"ref={(c)=>{this.buttonsecond=c}"（箭头形式的ref）

        我知道看到这里你会一头雾水--为什么突然多出来一个名为buttonsecond的class？

        实际上将代码拆分去看，就很容易去理解：

                        <1>其中的"ref="--就只是单纯的想在refs写入一个键值对；

                        <2>其中的形参"c"--指的是参入事件的button；

                        <3>其中的this--指的是Who，也就是该类组件（至于就箭头函数的指向问题，请见windows,function,arrow的恋爱循环_big-mouse 9527的博客-CSDN博客https://blog.csdn.net/m0_74369462/article/details/132122181?spm=1001.2014.3001.5501）

        总结下来，就是我在Who中新建了一个名为buttonsecond的class类，但是这个class存储的数据不是简单的字符，而是一个按钮

        React，很神奇吧

        part4：接下来解封"<button ref={this.Log}>打印对象-高级版本</button>"，再次执行该程序，查看有什么不同

         我们发现：这里我们并没有点击写着"打印对象-初级版本"的按钮，但是屏幕上就已经有返回结果了

        这里使用的是函数形式的ref

        从结果我们不难发现：函数形式的ref会自动执行一次--更准确地去说，是在渲染阶段去调用的

        我们常用函数形式的ref去解决一类问题--关于form的数据更新

至于ref的所有性质，以上代码均已涵盖，

        那么问题又来了--如果我写入的是input组件呢？该种方法又有什么作用呢？

        还记得我之前提到过的object吗？其中的数据均是以键值对的形式存在，这也就意味着，如果我们想去获取其中的数值，可以直接通过"object.class.key"的暴力手段直接获取，这也是我们在下一个博客中所要探讨的问题。