React 魔法揭秘：useRef 与 forwardRef 的奇妙之旅

引言：React 开发者的"秘密武器"

哈喽，各位稀土掘金的小伙伴们！今天，咱们来聊聊 React 开发中两个看似神秘，实则强大无比的"秘密武器"------useRef 和 forwardRef 。它们能帮我们解决很多棘手的 DOM 操作和组件通信问题。别看它们名字有点"高大上"，其实用起来非常简单直白，今天我就带大家一层层揭开它们的神秘面纱，保证让你一学就会，一用就爽！

useRef：DOM 操作的"直通车"

什么是 useRef？

useRef 是 React 提供的一个 Hook ，它的主要作用是让你在函数组件中也能方便地访问 DOM 元素或 React 组件实例。你可以把它想象成一个"盒子"，里面可以存放任何你想要引用的东西，而且这个"盒子"在组件的整个生命周期中都会保持不变，不会因为组件的重新渲染而丢失。

useRef 的使用场景

1.直接操作 DOM 元素：这是 useRef 最常见的用途。比如，你想获取一个输入框的焦点、播放/暂停视频、或者测量某个元素的尺寸，都可以通过 useRef 来实现。

2.保存可变值：除了 DOM 元素，useRef 还可以用来保存任何可变的值，而且这些值的改变不会触发组件的重新渲染。这在某些场景下非常有用，比如你想在组件中保存一个定时器的 ID，或者一个不需要响应式更新的变量。

useRef 代码示例：聚焦输入框

我们来看一个最经典的例子：点击按钮，让输入框自动获取焦点。

jsx 复制代码

import React, { useRef } from 'react';

function MyInput() {
  const inputRef = useRef(null); // 创建一个 ref

  const focusInput = () => {
    inputRef.current.focus(); // 通过 ref 访问 DOM 元素并调用其方法
  };

  return (
    <div>
      <input type="text" ref={inputRef} /> {/* 将 ref 绑定到 input 元素 */}
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
}

export default MyInput;

代码解读：

•我们通过 useRef(null) 创建了一个 inputRef。初始值 null 表示它还没有引用任何东西。

•将 inputRef 绑定到 <input> 元素的 ref 属性上。这样，当组件渲染完成后，inputRef.current 就会指向这个真实的 DOM 元素。

•在 focusInput 函数中，我们通过 inputRef.current.focus() 来操作 DOM，让输入框获取焦点。是不是非常简单直观？

forwardRef：Ref 的"传递者"

什么是 forwardRef？

forwardRef 是 React 提供的一个高阶组件（Higher-Order Component, HOC），它的作用是让你能够将父组件的 ref 转发（forward）给子组件内部的 DOM 元素或 React 组件。简单来说，就是让父组件可以直接操作子组件内部的某个元素，打破了组件之间的"ref 隔离"。

forwardRef 的使用场景

1.组件库开发：在开发可复用的组件库时，forwardRef 非常有用。比如，你开发了一个自定义的按钮组件，用户可能希望能够直接获取到这个按钮内部的真实 DOM 元素，以便进行一些高级操作（如聚焦、测量尺寸等）。

2.第三方库集成：当你需要集成一些不支持 ref 转发的第三方组件时，forwardRef 可以帮助你"打通" ref 的通道。

3.HOC 和 Render Props 模式：在这些模式下，forwardRef 可以确保 ref 能够正确地传递下去。

forwardRef 代码示例：父组件操作子组件输入框

我们来看一个父组件如何通过 forwardRef 操作子组件内部输入框的例子。

jsx 复制代码

import React, { useRef, forwardRef } from 'react';

// 子组件：CustomInput.jsx
const CustomInput = forwardRef((props, ref) => {
  return (
    <input type="text" ref={ref} placeholder="我是子组件的输入框" />
  );
});

export default CustomInput;

// 父组件：ParentComponent.jsx
import React, { useRef } from 'react';
import CustomInput from './CustomInput';

function ParentComponent() {
  const childInputRef = useRef(null);

  const focusChildInput = () => {
    childInputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={childInputRef} /> {/* 将 ref 传递给子组件 */}
      <button onClick={focusChildInput}>聚焦子组件输入框</button>
    </div>
  );
}

export default ParentComponent;

代码解读：

•CustomInput.jsx：我们使用 forwardRef 包裹了 CustomInput 组件。forwardRef 接收一个函数作为参数，这个函数有两个参数：props 和 ref。这里的 ref 就是父组件传递过来的 ref。

•我们将接收到的 ref 绑定到子组件内部的 <input> 元素上。

•ParentComponent.jsx：在父组件中，我们创建了一个 childInputRef ，并将其作为 ref 属性传递给 CustomInput 组件。

•当点击按钮时，focusChildInput 函数会通过 childInputRef.current.focus() 来操作子组件内部的输入框，使其获取焦点。

通过 forwardRef，我们成功地让父组件"越过"了子组件的边界，直接操作了子组件内部的 DOM 元素，是不是很酷？

总结：掌握它们，让你的 React 开发更上一层楼！

通过今天的讲解和代码示例，相信大家对 useRef 和 forwardRef 这两个 React Hook 有了更深入的理解。它们虽然看起来简单，但在实际开发中却能发挥巨大的作用，帮助你更好地控制 DOM 元素 、管理组件状态 ，以及实现更灵活的组件通信。

记住几个关键点：

•useRef 主要用于直接操作 DOM 元素或在组件生命周期内保存可变值，且其改变不触发组件重新渲染。

•forwardRef 则用于将父组件的 ref 转发给子组件内部的 DOM 元素 或 React 组件 ，实现父子组件间的 ref 传递。

掌握了这两个"秘密武器"，你的 React 开发技能一定会更上一层楼！赶紧在你的项目中尝试一下吧！如果你有任何疑问或者更好的实践经验，欢迎在评论区留言交流哦！