React中的Refs是什么

Refs的理解

1. 什么是ref
   1. 初步理解：像是一个容器 可向下传递给子组件 通过子组件的绑定 相当于将子组件中的 函数装进容器整个复制到了父组件中 达到父组件中可以访问子组件函数的目的
   2. 使用React.createRef来创建Refs （创建一个空的袋子）
   3. 通过this绑定Refs为refName（命名此袋子的名字）
   4. 在render（一般为子元素）中的元素使用ref={this.refName}的方法将此DOM或者实例放入current容器中 ref的current属性访问（current就像是Refs这个袋子中的装载容器）（函数没有实例 所以不能调用 只能使用forwardRef）
      1. 在函数内部使用ref（需要使用都hooks）（hooks本就是为了实现函数组件诞生的）
         1. 使用const声明即可 不需要使用this
      2. 转发Refs
         1. 什么叫转发
            1. 所谓转发 就是通过forwardRef这个方法将 父组件中传递下来的ref（即容器）传递给 其下的子组件（就像是传家宝 爷爷传给了儿子 儿子把这个原封不动的在传给了儿子）
            2. 这中间传递的方式是一样的就是ref={refName}的方式（手手相传）
         2. 高阶组件中的转发
            1. 父组件先将ref这个容器传递给高阶子组件 子组件中通过forwardRef将 父组件的ref容器 传递给自己的子组件 并命名 在高阶组件的孙子中将这个传递下来的容器 通过ref={refName}的形式 将自己的实例或者DOM装进这个容器中 那他爷爷组件中 就可以通过 current的形式拿到孙子封装的东西了
      3. forwardRef（只是爷爷将ref容器传递给孙子的工具人）
         1. React.createRef创建一个ref常量（一个容器）
         2. 父组件中将此ref（容器）传下去到子组件中
         3. 子组件中调用ref（容器）子组件中调用后 将在ref中绑定子组件的DOM（容器中将DOM装进去）
         4. 在父组件中使用ref.current（current就像是个勺子 将容器中的DOM挖出来 父组件就有了子组件的DOM了 就可以调用）
         5. 也可以在子组件中直接ref.current来绑定想要传给父容器的东西
      4. useRef
         1. ref的函数式写法const refName = useRef(null) 创建一个ref容器 初始值为null的容器
         2. return中的节点可以通过ref={refName}来将DOM来重新绑定到容器中