react,hooks中的useRef使用

在React中,useRef 是一个 Hook,它返回一个可变的引用对象,其 .current 属性被初始化为传递的参数(initialValue)。这个引用对象会在组件的整个生命周期内保持不变,并且可以在函数组件内部存储任何可变值,而不必触发重新渲染。

以下是一个 useRef 的基本使用示例:

javascript 复制代码
import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  // 创建一个ref来获取input元素
  const inputEl = useRef(null);

  // 定义一个函数,用于将焦点设置到input元素上
  const onButtonClick = () => {
    // 使用ref.current访问DOM元素
    inputEl.current.focus();
  };

  return (
    <div>
      {/* 将ref通过ref属性传递给<input>元素 */}
      <input type="text" ref={inputEl} />
      
      {/* 当按钮被点击时,调用onButtonClick函数 */}
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

export default TextInputWithFocusButton;

在这个例子中:

我们首先导入了 useRef Hook。

在组件内部,我们调用 useRef(null) 来创建一个引用对象 inputEl。

然后定义了一个处理函数 onButtonClick,当点击按钮时,该函数会被调用,进而调用 inputEl.current.focus() 来将焦点设置到与 inputEl 关联的 元素上。

在 标签上,我们将 inputEl 作为 ref 属性的值传入。React会自动将DOM元素关联到 inputEl.current 上,这样我们就可以在组件的任何地方直接访问和操作这个DOM元素了。

除了获取和操作DOM元素之外,useRef 还可以用来保存任何需要跨渲染周期保持的值,例如滚动位置、计数器或者其他非响应式的变量。

相关推荐
我们没有完整的家1 分钟前
技术速递|Playwright MCP 调试 Web 应用时,GitHub Copilot 生成断言脚本的实用方法
前端·github·copilot
universe_016 分钟前
前端学习之八股和算法
前端·学习
一川_15 分钟前
ElementUI分页器page-size切换策略:从保持当前页到智能计算的优化实践
前端
敲敲了个代码32 分钟前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate36 分钟前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫44 分钟前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪1 小时前
Vue3 响应式来!
前端·javascript·vue.js
芝士麻雀1 小时前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
Dontla1 小时前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
fruge1 小时前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux