揭开 React ref 的发展轨迹与进阶运用

2023-11-20 19:58:38

React ref 的诞生背景

React ref 的出现源于 JavaScript 自身的局限性。在传统的 DOM 操作中，开发者需要直接操作 DOM 元素，这不仅繁琐而且容易出错。为了解决这个问题，React 引入了虚拟 DOM 的概念，通过 diff 算法对比虚拟 DOM 和真实 DOM 的差异，从而只更新真正需要更新的部分。这种方式大大提高了前端开发的效率和性能。

然而，虚拟 DOM 也并非万能，在某些场景中，开发者仍然需要直接操作 DOM 元素。例如，当我们需要获取 DOM 元素的尺寸、位置或其他属性时，就需要用到 ref。此外，在某些特殊场景下，例如与第三方库集成时，也需要用到 ref 来获取 DOM 元素。

React ref 的发展历程

React ref 的发展经历了三个主要阶段：

第一阶段：字符串 ref

在 React 早期版本中，ref 使用字符串作为标识符，开发者需要通过 ReactDOM.findDOMNode() 方法来获取 DOM 元素。这种方式简单易用，但也有明显的缺点，例如：

* 只能获取单个 DOM 元素
* 无法在函数组件中使用
* 不支持跨组件引用

第二阶段：回调 ref

为了解决字符串 ref 的不足，React 引入了回调 ref。回调 ref 允许开发者在组件实例化时传入一个函数，该函数将在组件挂载后被调用，并传入 DOM 元素作为参数。这种方式更加灵活，可以获取多个 DOM 元素，也可以在函数组件中使用。但是，回调 ref 仍然不支持跨组件引用。

第三阶段：useRef hook

在 React 16.8 版本中，引入了 useRef hook，它提供了一种新的方式来使用 ref。useRef hook 返回一个可变的 ref 对象，该对象具有 current 属性，指向 DOM 元素。useRef hook 可以解决字符串 ref 和回调 ref 的所有缺点，并且还支持跨组件引用。