React 初识 createRef：一个深度之旅

掀开 React Refs 的面纱

React Refs 在 React 生态系统中发挥着至关重要的作用，它允许组件与底层 DOM 元素建立联系，从而操纵和控制这些元素。换言之，Refs 是组件与 DOM 元素之间的桥梁，为组件提供了访问和操作 DOM 元素的能力。

场景与使用方式：让组件与 DOM 元素亲密接触

何时需要使用 Refs？

Refs 的使用场景多种多样，以下是一些常见情况：

• 直接访问 DOM 元素，比如获取 DOM 元素的尺寸、位置、内容等。
• 手动操作 DOM 元素，例如聚焦输入框、滚动页面、修改样式等。
• 与第三方库交互，如使用 D3.js 操作 SVG 或使用 jQuery 操作 DOM。

如何使用 Refs？

在 React 中，可以使用两种方式来创建 Refs：

• 字符串 Refs（字符串形式）： 通过在组件的 render() 方法中使用 ref 属性，将字符串作为参数传递给 DOM 元素，随后可以在组件实例中通过 this.refs 来访问该 DOM 元素。
• 回调 Refs（函数形式）： 通过在组件的 render() 方法中使用 ref 属性，将一个函数作为参数传递给 DOM 元素，随后可以在组件实例中通过 this.refs 来访问该函数，并通过调用该函数来访问 DOM 元素。

注意事项：踩在巨人肩膀上，避免陷入陷阱

在使用 Refs 时，需要注意以下几点：

• Refs 只应该在组件类中使用，函数式组件不支持 Refs。
• Refs 不是一个 React Hook，这意味着不能在函数式组件中使用 Refs。
• 在使用 Refs 时，应该始终使用回调 Refs，因为字符串 Refs 在某些情况下可能导致内存泄漏。
• 不要滥用 Refs，因为过多地使用 Refs 会损害组件的性能。

createRef 与 Hook useRef：亦敌亦友，惺惺相惜

createRef 和 Hook useRef 都是 React 中用于创建 Refs 的两种不同方式，它们之间既有相似之处，也有不同之处。

• 相似之处：
  • createRef 和 Hook useRef 都可以用于创建 Refs。
  • createRef 和 Hook useRef 都可以通过 current 属性来访问 DOM 元素。
• 不同之处：
  • createRef 是一个类属性，而 Hook useRef 是一个函数。
  • createRef 可以用于字符串 Refs 和回调 Refs，而 Hook useRef 只支持回调 Refs。
  • createRef 在组件实例中通过 this.refs 来访问，而 Hook useRef 在组件实例中通过 useRef() 函数来访问。

React createRef 源码之旅：深入技术细节，探寻奥秘

React createRef 的源码位于 react-dom/cjs/react-dom.production.min.js 文件中，其中包含了创建 Refs 的核心逻辑。

export function createRef() {
  var refObject = {
    current: null
  };
  return refObject;
}

从源码中可以看出，createRef 函数返回一个对象，该对象有一个 current 属性，用于存储 DOM 元素的引用。

总结：Refs 在 React 中的作用与使用方法

Refs 是 React 中一个非常重要的概念，它允许组件与底层 DOM 元素建立联系，从而操纵和控制这些元素。在 React 中，可以通过字符串 Refs 和回调 Refs 两种方式来创建 Refs。

在使用 Refs 时，需要注意以下几点：

• Refs 只应该在组件类中使用，函数式组件不支持 Refs。
• Refs 不是一个 React Hook，这意味着不能在函数式组件中使用 Refs。
• 在使用 Refs 时，应该始终使用回调 Refs，因为字符串 Refs 在某些情况下可能导致内存泄漏。
• 不要滥用 Refs，因为过多地使用 Refs 会损害组件的性能。

createRef 是 React 中用于创建 Refs 的一种方式，它返回一个对象，该对象有一个 current 属性，用于存储 DOM 元素的引用。