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可以帮助你避免不必要的渲染,同时保持对某些值的持久引用。

相关推荐
Endeavour_T2 分钟前
ECharts图表怎么做自适应?
前端·echarts
bo521003 分钟前
浏览器缓存优先级
前端·面试·浏览器
namehu3 分钟前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
opbr5 分钟前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
杨进军8 分钟前
React 使用 MessageChannel 实现异步更新
react.js
G等你下课10 分钟前
使用 Cookie 实现登录登出功能案例
前端·后端
西瓜树枝15 分钟前
antd vue全局自定义样式前缀实践
前端·vue.js
前端进阶者15 分钟前
地图坐标系转换JS库
前端·javascript
蛙哇16 分钟前
Pinia 核心源码简易实现
前端
飞天牛牛16 分钟前
Shell 脚本里 nvm 不识别,node 却能用?原理与最佳实践
前端