揭开 React Ref 神秘面纱，玩转 DOM 引用！

React Ref：从入门到精通

揭开 React Ref 的神秘面纱

React Ref 是一种强大的工具，允许开发者访问 DOM 元素的直接引用。它提供了控制和交互性的新维度，但同时它也可能让人望而生畏。本文将深入浅出地解析 React Ref 的工作原理，教你如何熟练地将它应用于函数组件和类组件，并解决转发 Ref 给父组件的难题。

Ref API 扫盲

无论使用函数组件还是类组件，使用 Ref 的最终目标都是获取 DOM 元素的引用。useRef 和 createRef 是两种创建 Ref 对象的常用方法：

• 函数组件：useRef

  const ref = useRef();
  

  useRef 返回一个对象，其中包含一个指向 DOM 元素引用的 current 属性。

• 类组件：createRef

  constructor() {
     super();
     this.ref = createRef();
  }
  

  createRef 直接在组件实例上定义，不需要返回对象。

为 DOM 元素附加 Ref

通过在 DOM 元素上添加 ref 属性，可以将 Ref 对象附加到该元素：

<div ref={ref}>我是 DOM 元素</div>

获取 DOM 元素引用

• 函数组件：

  console.log(ref.current); // 输出 DOM 元素
  

• 类组件：

  console.log(this.ref.current); // 输出 DOM 元素
  

高级应用：转发 Ref 给父组件

当需要在父组件中访问子组件的 DOM 元素引用时，可以使用 React.forwardRef ：

• 子组件：

  const Child = React.forwardRef((props, ref) => {
     return <div ref={ref}>我是子组件</div>;
  });
  

  在子组件中，通过函数参数接收 Ref 对象，并将其附加到 DOM 元素。

• 父组件：

  const ref = useRef();
  

  <Child ref={ref} />
  

  在父组件中，创建 Ref 对象并作为 props 传递给子组件。

Ref 的常见问题解答

1. Ref 和 state 有什么区别？

• Ref 提供对 DOM 元素的直接访问，而 state 存储组件内部的数据。

2. 我应该何时使用 Ref？

• 当需要在组件之外直接与 DOM 交互时，例如测量元素的尺寸或控制焦点。

3. 使用 Ref 有什么缺点？

• 过度使用 Ref 会导致代码混乱和维护困难。
• Ref 与 DOM 紧密耦合，在虚拟 DOM 中不必要。

4. Ref 与 useEffect 有什么关系？

• useEffect 可以用来在组件挂载和更新时执行副作用，包括访问 DOM 元素的引用。

5. 我可以在箭头函数组件中使用 Ref 吗？

• 是的，可以通过 useRef 钩子。

结论

React Ref 是一个强大的工具，可以提升你的 React 应用的交互性和控制力。通过理解本文介绍的概念，你可以自信地将 Ref 应用于你的项目中，并获得更好的用户体验。