useRef总结

一、使用ref引用值

在react中ref的主要用途是用来获取DOM元素或者某个组件实例的引用。当你想访问真实的DOM节点,或者需要在组件之间共享可变数据且不需要触发重新渲染时,通常会使用ref。在vue中ref是响应式的,当数据发生改变时,相关的视图会自动更新。但在react中不是响应式的。

二、给组件添加 ref

可以通过从 React 导入 useRef Hook 来为组件添加一个 ref:

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

在组件内,调用 useRef Hook 并传入你想要引用的初始值作为唯一参数。例如,这里的 ref 引用的值是"0":

javascript 复制代码
const ref = useRef(0);

useRef 返回一个这样的对象:

javascript 复制代码
{ 
  current: 0 // 你向 useRef 传入的值
}

你可以用 ref.current 属性访问该 ref 的当前值。这个值既可以读取它也可以写入它。

三、何时使用

  • 存储和操作 DOM 元素
  • 存储不需要被用来计算 JSX 的其他对象。
  • 如果你的组件需要存储一些值,但不影响渲染逻辑,请选择 ref

四、使用实例

文本输入框获得焦点
javascript 复制代码
import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        发布
      </button>
    </>
  );
}

点击完发布按钮,输入框会获得焦点

相关推荐
黑客老陈18 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安23 分钟前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
z千鑫1 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端
m0_748230442 小时前
SSE(Server-Sent Events)返回n ,前端接收数据时被错误的截断【如何避免SSE消息中的换行符或回车符被解释为事件消息的结束】
前端