本文介绍了如何在 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 应用的性能，并实现特定场景下的需求。
