使用 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 元素。

注意事项：

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

总结：

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