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

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

哈喽,各位稀土掘金的小伙伴们!今天,咱们来聊聊 React 开发中两个看似神秘,实则强大无比的"秘密武器"------useRefforwardRef 。它们能帮我们解决很多棘手的 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.HOCRender 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 接收一个函数作为参数,这个函数有两个参数:propsref。这里的 ref 就是父组件传递过来的 ref。

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

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

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

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

总结:掌握它们,让你的 React 开发更上一层楼!

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

记住几个关键点:

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

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

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

相关推荐
陌小路1 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing121389 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36517 分钟前
antd 组件部分API使用方法
前端
BillKu20 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL22 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆41 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞1 小时前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者1 小时前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端