React基础 第二十三章(理解useRef)

在React组件中,有时我们需要"记住"某些值,但又不希望这些值的变化触发组件的重新渲染。这时,useRef钩子就派上用场了,它允许你在组件的整个生命周期中持久地存储数据。这个钩子返回一个可变的ref对象,其.current属性被初始化为传递给useRef的参数(即初始值)。这个对象将在组件的所有渲染之间持续存在,而不会引起任何额外的渲染。

如何向组件添加ref

示例:

jsx 复制代码
// 1.导入useRef
import { useRef } from 'react';

function Counter() {
// 2.调用`useRef`函数并给它传递一个初始值
  const ref = useRef(0); // 这行代码创建了一个ref对象,其`.current`属性被设置为`0`。这个ref对象可以在组件的任何地方被访问,但它不会触发组件的重新渲染。

  function handleClick() {
    // 3. 更新ref中存储的值。你可以直接修改它的`.current`属性。在`handleClick`函数中,我们通过修改`.current`的值来更新计数器。
    ref.current = ref.current + 1;
    alert('你点击了 ' + ref.current + ' 次!');
  }

  return <button onClick={handleClick}>点击我!</button>;
}

这里,每次点击按钮时,都会增加ref的.current值,并弹出一个警告框显示点击次数。重要的是,这种修改不会导致组件重新渲染,因为ref不是一个状态(state)。

注意事项:

  • 不要在渲染过程中修改ref : 避免在组件的渲染函数或任何其他渲染逻辑中修改ref的.current属性。这是因为修改.current不会触发组件的重新渲染,如果你在渲染过程中修改它,可能会导致渲染的输出和ref的值不一致。

ref与state的不同

ref和state都可以在组件的不同渲染之间保留信息,但它们的工作方式有所不同。state的更新会触发组件的重新渲染,而ref的更新则不会。

技巧

  • 当你需要存储不会触发渲染的值时,使用ref。
  • 当值的变化需要触发渲染时,使用state。

示例

jsx 复制代码
// 使用state
const [count, setCount] = useState(0);

// 使用ref
const countRef = useRef(0);

注意事项

  • 不要在渲染过程中读取或写入ref的.current值。如果需要在渲染期间使用某些信息,请使用state。

如何安全地使用ref

useRef可以用来存储几乎任何类型的值,但它最常用于两种情况:存储对DOM元素的引用和存储数据,这些数据的变化不应该引起组件的重新渲染。

技巧

  • 将ref用于那些不会影响渲染的值,例如存储timeout ID或操作DOM元素。

示例

jsx 复制代码
const intervalRef = useRef(null);

// 使用ref存储interval ID
intervalRef.current = setInterval(() => {
  // ...
}, 1000);

// 清除interval
clearInterval(intervalRef.current);

注意事项:

  • 避免过度依赖ref: 尽管ref是一个强大的工具,但它不应该被用于那些可以用state解决的问题。这是因为state的更新会自动触发组件的重新渲染,而ref的更新则不会。如果你过度使用ref来存储数据,可能会导致组件的行为难以预测,因为组件的UI可能不会反映最新的数据状态。

记住,合理地使用ref可以帮助你避免不必要的渲染,同时保持对某些值的持久引用。

相关推荐
CodeSheep17 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅21 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku15 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css