使用 useRef 在 React 组件重新渲染时保持变量状态-js教程-PHP中文网

使用 useRef 在 React 组件重新渲染时保持变量状态

霞舞

发布： 2025-08-05 18:32:16

原创

1036人浏览过

使用 useref 在 react 组件重新渲染时保持变量状态

本文介绍了如何在 React 组件重新渲染时保持变量状态，避免使用 useState 引起的重新渲染。通过 useRef Hook，可以在组件的整个生命周期内保持变量的引用，并且修改该变量不会触发组件的重新渲染，从而优化性能并实现特定场景下的需求。

在 React 中，有时我们需要在组件重新渲染时保持某些变量的状态，但又不想因为这些变量的改变而触发组件的重新渲染。例如，在处理 canvas 绘图时，我们可能需要保存一些坐标点信息，这些信息需要在组件的生命周期内保持不变，但改变它们并不需要重新渲染整个组件。useState 可以用来保存状态，但是它的更新会触发组件的重新渲染，这在某些情况下可能是不必要的。这时，useRef Hook 就派上了用场。

useRef Hook 返回一个可变的 ref 对象，该对象具有 .current 属性，用于保存变量的值。与 useState 不同的是，修改 ref.current 的值不会触发组件的重新渲染。这意味着我们可以使用 useRef 来保存那些需要在组件生命周期内保持不变，但又不需要触发重新渲染的变量。

以下是一个使用 useRef 保持变量状态的示例：

import React, { useRef, useEffect } from 'react';

const ImagePreview = () => {
  const point1Ref = useRef([0, 0]);
  const point2Ref = useRef([10, 10]);
  const canvasRef = useRef(null);

  const changePoint1 = () => {
    point1Ref.current = [10, 10];
    rewriteCanvas();
  };

  const changePoint2 = () => {
    point2Ref.current = [20, 20];
    rewriteCanvas();
  };

  const rewriteCanvas = () => {
    // 确保 canvasRef.current 存在
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');

      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制 point1
      ctx.beginPath();
      ctx.arc(point1Ref.current[0], point1Ref.current[1], 5, 0, 2 * Math.PI);
      ctx.fillStyle = 'red';
      ctx.fill();

      // 绘制 point2
      ctx.beginPath();
      ctx.arc(point2Ref.current[0], point2Ref.current[1], 5, 0, 2 * Math.PI);
      ctx.fillStyle = 'blue';
      ctx.fill();
    }
  };

  useEffect(() => {
    // 在组件挂载后初始化 canvas
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      canvas.width = 200; // 设置 canvas 宽度
      canvas.height = 100; // 设置 canvas 高度
      rewriteCanvas();
    }
  }, []); // 仅在组件挂载时运行

  return (
    <div>
      <canvas ref={canvasRef} />
      <button onClick={changePoint1}>Change Point 1</button>
      <button onClick={changePoint2}>Change Point 2</button>
    </div>
  );
};

export default ImagePreview;

登录后复制

在这个示例中，point1Ref 和 point2Ref 使用 useRef 初始化，分别保存了 point1 和 point2 的坐标信息。changePoint1 和 changePoint2 函数修改了 ref.current 的值，但不会触发组件的重新渲染。rewriteCanvas 函数根据最新的坐标信息重新绘制 canvas。canvasRef 用于引用 canvas 元素，确保我们可以在组件挂载后访问 canvas 元素。

Fliki

高效帮用户创建视频，具有文本转语音功能

151

查看详情

注意事项：

useRef 返回的是一个普通 JavaScript 对象，可以像访问普通对象属性一样访问 ref.current。
修改 ref.current 不会触发组件的重新渲染，因此适用于保存那些不需要触发重新渲染的变量。
useRef 在组件的整个生命周期内保持不变，即使组件重新渲染，ref 对象仍然是同一个。
useRef 非常适合用于存储 DOM 元素引用，如上面的 canvasRef 示例。

总结：

useRef Hook 提供了一种在 React 组件重新渲染时保持变量状态，而不触发重新渲染的机制。它适用于保存那些需要在组件生命周期内保持不变，但又不需要触发重新渲染的变量，例如 DOM 元素引用、定时器 ID 等。通过合理使用 useRef，可以优化 React 应用的性能，并实现特定场景下的需求。

以上就是使用 useRef 在 React 组件重新渲染时保持变量状态的详细内容，更多请关注php中文网其它相关文章！