React.js项目开发环境正常生产环境计分逻辑异常求助

问题根因 #

• 开发模式默认开启StrictMode严格模式，组件会被故意重复挂载、渲染2次做副作用校验，叠加上业务状态更新触发的重渲染，总共会执行3-4次渲染，你当前的计分逻辑完全依赖多次渲染的时序巧合，才能拿到延迟写入sessionStorage的分数值，本身就存在竞态问题。
• 生产环境构建会关闭严格模式的重复渲染校验，渲染次数会被压缩到业务逻辑必需的最小值，原本靠多次渲染碰运气读取数据的逻辑就会直接失效，和部署在CDN平台没有直接关系。
• 现有实现把卡牌生成、分数计算、sessionStorage读写、组件渲染几个动作拆分到了不同组件的渲染流程/副作用里，执行顺序完全交给React调度，首次渲染时分数还没计算、没写入缓存，自然读出来的都是初始0值。

修复步骤 #

1. 统一数据源，不要在渲染流程中零散读写缓存 #

所有计分相关状态全部收敛到根组件（或全局Context）用useState/useReducer管理，sessionStorage只做页面刷新时的持久化兜底，不要在子组件渲染过程中随用随读。
状态初始化时直接同步读取缓存值，保证首次渲染就能拿到正确的历史分数：

// 根组件初始化分数状态，用惰性初始化直接读缓存
const [totalScore, setTotalScore] = useState(() => {
  const cacheStr = sessionStorage.getItem('classment')
  return cacheStr ? JSON.parse(cacheStr).pts : 0
})
const [cards, setCards] = useState([])

2. 抽离统一的牌局生成逻辑，消除竞态 #

把生成卡牌、计算单局分数、更新总分、写入缓存四个动作放在同一个同步函数里执行，不要拆分到不同组件的useEffect里分散执行，从根源避免时序问题：

const startNewRound = () => {
  // 1. 同步生成5张随机卡牌
  const newCards = Array.from({length:5}, () => getRandomCardWithPoint())
  // 2. 直接累加计算单局分数，不要等子组件渲染时再算
  const roundPoint = newCards.reduce((sum, card) => sum + card.point, 0)
  // 3. 统一更新状态、写入缓存
  setCards(newCards)
  setTotalScore(prevTotal => {
    const newTotal = prevTotal + roundPoint
    const classmentData = { pts: newTotal, name: currentUsername }
    // 状态更新同时同步写入sessionStorage
    sessionStorage.setItem('classment', JSON.stringify(classmentData))
    return newTotal
  })
}

页面首次加载、点击重开按钮时直接调用这个函数即可，不要靠渲染触发逻辑执行。

3. 清理子组件的冗余缓存读取逻辑 #

所有需要用到分数、卡牌数据的子组件，统一通过props或Context从根组件拿实时状态，不要自己在组件里单独读sessionStorage。
如果需要监听状态变化同步做其他操作，useEffect必须加全依赖项，不要留空依赖导致副作用只执行一次：

// ❌ 错误写法：空依赖，生产环境仅挂载时执行一次，永远拿不到更新后的分数
useEffect(() => {
  const data = JSON.parse(sessionStorage.getItem('classment'))
  setLocalScore(data.pts)
}, [])

// ✅ 正确写法：只在状态变更时同步写缓存，不要反过来读缓存驱动本地状态
useEffect(() => {
  sessionStorage.setItem('classment', JSON.stringify({
    pts: totalScore,
    name: currentUsername
  }))
}, [totalScore, currentUsername])

4. 本地提前验证生产构建 #

不要等部署到线上再调试，本地执行构建命令后用静态服务跑生产包验证：

npm run build
npx serve -s build

本地验证计分逻辑正常后再部署，避免开发环境和生产环境的行为差异导致bug。

内容的提问来源于stack exchange，提问作者Rodolphe Augusto