React useRef

useRef 是 React 提供的一个 Hook,它用于在函数组件中访问和操作 DOM 节点或存储可变的值,而这些值在组件的整个生命周期中保持不变。

作用:

  1. 访问 DOM 节点useRef 可以获取真实的 DOM 元素,这对于需要直接操作 DOM、管理焦点、触发强制布局或进行测量等操作特别有用。
  2. 存储可变数据useRef 还常用于存储组件内的可变数据。这些数据可以在渲染之间保持不变,但更改它们不会触发组件重新渲染。

用法:

当你创建一个 ref 时,可以将其附加到 React 元素的 ref 属性上。

ini 复制代码
1const myRef = useRef(initialValue);
  • initialValue 是 ref 对象初始时的值。useRef 返回一个普通的 JavaScript 对象,它的 current 属性被初始化为传递给 useRef 的参数。

然后,可以将 myRef.current 设置为 DOM 节点或任何想要存储的值。

示例:

访问 DOM 节点:

ini 复制代码
1import React, { useRef } from 'react';
2
3function TextInputWithFocusButton() {
4  const inputEl = useRef(null);
5
6  const onButtonClick = () => {
7    // `current` 属性指向了 input 元素的 DOM 节点
8    inputEl.current.focus();
9  };
10
11  return (
12    <>
13      <input ref={inputEl} type="text" />
14      <button onClick={onButtonClick}>Focus the input</button>
15    </>
16  );
17}

在此示例中,我们创建了一个输入框和一个按钮,点击按钮时,输入框会获得焦点。这里 useRef 被用来获取 input 元素的引用。

存储可变数据:

ini 复制代码
1import React, { useRef } from 'react';
2
3function TimerComponent() {
4  const count = useRef(0); // count 不是一个状态,更改它不会触发组件重新渲染
5
6  const handleStart = () => {
7    count.current = setInterval(() => console.log('tick'), 1000);
8  };
9
10  const handleStop = () => {
11    clearInterval(count.current);
12  };
13
14  return (
15    <>
16      <button onClick={handleStart}>Start</button>
17      <button onClick={handleStop}>Stop</button>
18    </>
19  );
20}

在这个定时器的例子中,useRef 用于存储计时器的 ID。即使在重新渲染过程中,count.current 的值也保持不变。

使用注意事项:

  1. 不要滥用 useRef :虽然 useRef 可以存储任何类型的值,但并不意味着你应该使用它来代替所有的组件状态。通常,只有当你需要跨渲染周期保持可变值时,才使用 useRef
  2. 合理使用 DOM 操作 :在 React 中,尽可能使用声明式代码来处理 DOM 操作。useRef 和直接的 DOM 操作应该作为最后的手段,例如集成非 React 的库或实现焦点管理等。
  3. 保持引用稳定useRef 在组件的整个生命周期内保持引用稳定,这意味着 useRef 返回的对象在组件的每次重新渲染中都是相同的。
  4. 更新 current 不会触发渲染 :当你修改 useRef 对象的 current 属性时,这不会触发组件的重新渲染。如果你想要在更改引用值时触发渲染,应该使用 useState
  5. 慎用 useRef 保存上一次的 props 或 state:有时你可能需要存储上一次的 props 或 state,这是可行的,但请小心确保不违反 React 数据流的原则。

通过使用 useRef,你可以在函数组件中有效地管理 DOM 引用和存储可变数据,同时避免不必要的组件更新和渲染。

相关推荐
前端小巷子16 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出3 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的3 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试