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

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端