react中ref的用法(reactrefs)

对于 Ref 理解和使用，一些读者可能还停留在使用中 ref 获取真实 DOM 在实例层面上，元素和获取组件

其实 ref 除了这两个常用功能，还有很多其他的小技巧

通过这篇文章的研究，你会收获的 React ref 基本和先进的用法，并且能够理解 React 如何处理内部 ref 是的，通过一个小的 Demo 提问的方式给你带来了更深刻的理解 ref 的底层原理

1. ref 理解与使用

对于 Ref 理解应从两个角度进行分析：

• Ref 创建对象：使用 createRef 或 useRef 创建 Ref 对象 [相关推荐：Redis视频教程、编程视频]

• React 本身对 Ref 处理:标签中的标签处理 ref 属性，React 怎么处理？

1.1. ref 对象的创建

1.1.1. createRef

在类组件中，我们将通过 createRef 去创建一个 Ref 对象，它将保存在类组件的例子中，它的实现非常简单

packages/react/src/ReactCreateRef.js

export function createRef(): RefObject {
  const refObject = {
    current: null,
  }

  return refObject
}

可以看出，它创建了一个包含的内容 current 属性的对象，仅此而已

1.1.2. useRef

这意味着我们不能在函数组件中使用 createRef，因为每个函数组件渲染都是一个新的函数执行，每个函数组件渲染都是一个新的函数执行 createRef 你得到的是一个新的对象，不能保留它原来的引用

所以在函数组件中，我们会使用它 useRef 创建 Ref 对象，React 会将 useRef 对应函数组件 fiber 对象关联，将 useRef 创建的 ref 物体挂载到相应的物体 fiber 对象上

这样，每次函数组件执行时，只要函数组件不被销毁，那么相应的函数组件就会被销毁 fiber 对象实例将永远存在，因此对象实例将永远存在 ref 也可以保留下来

1.2. React 对标签中 ref 属性的处理

首先要明确一个结论， React 中获取 DOM 不仅仅是通过元素或组件实例 ref 获得对象！！！！

也就是说，不仅仅是通过先调用 createRef 创建 ref 对象，然后将其赋值到要获得的元素或组件实例中 ref 事实上，在属性方面，还有其他方法

:::tip

只有类组件才能获得组件实例这一说法，函数组件没有实例，不能被使用 ref 标记，但可以通过 forwardRef 结合 useImperativeHandle 赋予函数组件 ref 标记的

:::

1.2.1. string ref

当我们在元素或类组件标签中给出时， ref 当属性传递字符串时，可以在组件实例中使用 this.refs 中访问到

class Child extends React.Component