React状态更新组件中如何仅初始化一次起始余额用于净头寸计算

问题背景 #

在游戏项目的React组件index.tsx中，组件会随用户余额（footerBalance）变化重渲染。开发「净头寸」功能时，需要在游戏启动时保存用户余额作为基准值（footerBalanceAtStart），后续通过公式netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance)计算净头寸，但当前余额更新时基准值会被重置，导致净头寸变回0，需实现基准值仅初始化一次、全程保持不变。

现有核心代码：

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance);

解决方案 #

使用useRef存储基准值（其.current属性在组件生命周期内不会随重渲染重置），结合useEffect在组件首次挂载时完成基准值的初始化：

基础实现代码 #

import { useAppSelector } from './path-to-redux-hooks';
import { useRef, useEffect } from 'react';

const GameComponent = () => {
  const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance);
  // 初始化ref容器，用于存储基准余额
  const footerBalanceAtStartRef = useRef<string | number>(footerBalance);

  // 组件首次挂载时设置基准值，仅执行一次
  useEffect(() => {
    footerBalanceAtStartRef.current = footerBalance;
  }, []);

  // 计算净头寸
  const netPositionBalance = Number(footerBalanceAtStartRef.current) - Number(footerBalance);

  return (
    <div>
      <p>当前余额: {footerBalance}</p>
      <p>净头寸: {netPositionBalance}</p>
    </div>
  );
};

export default GameComponent;

适配异步加载场景 #

如果footerBalance是异步从Redux获取（组件挂载初期可能为空），可调整useEffect逻辑，确保基准值仅在余额首次有效时设置：

useEffect(() => {
  // 仅当余额存在且基准值未初始化时赋值
  if (footerBalance && !footerBalanceAtStartRef.current) {
    footerBalanceAtStartRef.current = footerBalance;
  }
}, [footerBalance]);

原理说明 #

• useRef创建的引用容器会在组件整个生命周期内保持引用不变，不会因组件重渲染而重置内部值。
• 空依赖数组的useEffect仅在组件首次挂载时执行一次，确保基准值只在游戏启动时被初始化；适配异步场景的useEffect则会在余额首次有效时完成基准值设置，后续余额更新不会触发基准值修改。

内容的提问来源于stack exchange，提问作者Arju Aman