ReactJS中如何在不触发组件重渲染的情况下持久化值？

要实现这个需求，你可以使用React的useRef钩子——它允许你存储跨组件渲染周期的可变值，并且修改这个值不会触发组件重渲染，完美匹配你的需求。

原代码的问题 #

你当前的代码中，color是每次组件渲染时重新声明的变量，无法在渲染之间保留值；如果改用useState存储color，修改时又会触发组件重渲染，不符合要求。

修改后的代码示例 #

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

function TotalNumberComponent() {
  const [totalNumber, setTotalNumber] = useState(0);
  // 用useRef初始化color的初始值
  const colorRef = useRef('red');

  // 监听totalNumber的变化，更新colorRef的值
  useEffect(() => {
    colorRef.current = totalNumber % 10 === 9 ? 'green' : 'red';
  }, [totalNumber]); // 仅当totalNumber变化时执行更新逻辑

  // 示例：点击按钮修改数值，此时colorRef会更新但组件不会额外重渲染
  const handleIncrement = () => {
    setTotalNumber(prev => prev + 1);
  };

  return (
    <div>
      <p>当前数值：{totalNumber}</p>
      <button onClick={handleIncrement}>增加数值</button>
      {/* 注意：如果需要在JSX中显示color，可直接在渲染阶段计算（无需持久化）
          因为组件会因totalNumber变化重渲染，计算结果会自动更新：
          <p style={{color: totalNumber %10 ===9 ? 'green' : 'red'}}>示例文本</p> */}
    </div>
  );
}

关键说明 #

• useRef的.current属性是可变的，它会在组件的整个生命周期中保持引用，不会因为组件重渲染而重置。
• 修改colorRef.current不会触发组件重渲染，只有当totalNumber变化（调用setTotalNumber）时，组件才会重渲染，此时useEffect会根据新的totalNumber更新colorRef的值。
• 如果color仅用于非渲染相关的逻辑（比如后续事件处理、异步操作等），这种方式完全适用；如果需要在JSX中实时显示color，直接在渲染阶段根据totalNumber计算即可，无需额外持久化——因为计算逻辑依赖totalNumber，组件重渲染时会自动得到最新值，也不会额外触发重渲染。

内容的提问来源于stack exchange，提问作者Jessica Wang