React应用无需Redux实现会话级EXP变量跨组件跨页面共享的方法

给两个完全不需要引入Redux、零额外依赖的方案，都符合你会话级存储、改动量极小的需求： #

方案1：React原生Context API（支持响应式更新，推荐） #

不需要任何第三方包，仅需3步完成接入：

1. 新建全局状态文件 src/XpContext.tsx

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义状态类型
type XpDataType = {
  tXP: number;
  xpNeed: number;
  level: number;
};

// 初始值可根据你的业务逻辑修改
const defaultXp: XpDataType = {
  tXP: 0,
  xpNeed: 100,
  level: 1
};

const XpContext = createContext<{
  xpData: XpDataType;
  updateXpData: (newData: Partial<XpDataType>) => void;
}>({
  xpData: defaultXp,
  updateXpData: () => {}
});

// 提供者组件
export function XpProvider({ children }: { children: ReactNode }) {
  const [xpData, setXpData] = useState<XpDataType>(defaultXp);

  const updateXpData = (newData: Partial<XpDataType>) => {
    setXpData(prev => ({ ...prev, ...newData }));
  };

  return (
    <XpContext.Provider value={{ xpData, updateXpData }}>
      {children}
    </XpContext.Provider>
  );
}

// 自定义hooks，简化调用逻辑
export function useXp() {
  return useContext(XpContext);
}

2. 在App.js中包裹所有路由组件

import { XpProvider } from './XpContext';

function App() {
  return (
    <XpProvider>
      {/* 原有所有路由、组件代码保持不变放在此处即可 */}
    </XpProvider>
  );
}

3. 在组件中使用/更新状态

• 在Type.tsx中替换原有逻辑：

import { useXp } from '../XpContext';

// 组件内调用hooks
const { xpData, updateXpData } = useXp();

// 原有计算逻辑修改
if (currIndex + 1 === length) {
  // ... 原有计算逻辑保持不变，得到新的addXP等值
  const newTXP = xpData.tXP + addXP;
  // 补充你自己的等级、升级所需经验计算逻辑得到newLevel、newXpNeed
  // 更新全局状态
  updateXpData({
    tXP: newTXP,
    level: newLevel,
    xpNeed: newXpNeed
  });
  // ... 其余逻辑保持不变
}

• 在其他页面（比如Select Test组件）直接读取即可：

import { useXp } from '../XpContext';

function SelectTest() {
  const { xpData } = useXp();
  // 直接使用 xpData.tXP、xpData.level、xpData.xpNeed 即可，状态更新时UI会自动刷新
}

方案2：sessionStorage 极简方案（完全无需重构，适合临时演示项目） #

不需要新建任何额外文件，利用浏览器会话存储天然满足你关闭应用就重置的需求：

• 存数据（在Type.tsx中更新时调用）：

sessionStorage.setItem('xpData', JSON.stringify({
  tXP: newTXP,
  level: newLevel,
  xpNeed: newXpNeed
}));

• 读数据（任意页面需要时调用）：

const defaultXp = { tXP: 0, xpNeed: 100, level: 1 };
const xpData = JSON.parse(sessionStorage.getItem('xpData') || JSON.stringify(defaultXp));

如果需要响应式更新，只需封装一个10行代码的自定义hooks即可，无需引入额外依赖。

内容的提问来源于stack exchange，提问作者Scott Lindsey