React组件重渲染时State Hooks重复调用初始状态函数求助

核心问题原因 #

你当前的写法是直接调用函数作为useState的初始值（比如useState(createNewTileBag())），这种写法会导致每次组件重渲染时，这个初始化函数都会被执行一遍——哪怕React只会在首次渲染时使用它的返回值作为初始状态，后续渲染会忽略，但函数本身的执行无法避免。

正确写法：用回调函数作为初始值 #

把初始化函数包裹成回调传给useState，React只会在组件首次挂载时执行这个回调获取初始值，后续重渲染不会再触发它：

// 仅首次渲染执行createNewTileBag()
const [tileBag, setTileBag] = useState(() => createNewTileBag());

// 处理依赖tileBag初始值的troughLetters
const [troughLetters, setTroughLetters] = useState(() => {
  // 复用初始tileBag实例，避免创建两个独立实例
  const initialBag = createNewTileBag();
  const takenLetters = initialBag.takeRandomTiles(7);
  // 如果takeRandomTiles会修改原实例，建议改成返回新实例的写法（符合React不可变状态原则）
  // 比如：const { newBag, takenLetters } = initialBag.takeRandomTiles(7);
  return takenLetters;
});

// 同样处理board的初始状态
const [board, setBoard] = useState(() => createNewBoard());

针对关联状态的优化方案 #

如果tileBag和troughLetters这类状态强关联（修改一个会影响另一个），用useReducer统一管理更清晰，还能避免分散状态的初始化混乱：

function gameReducer(state, action) {
  switch (action.type) {
    case 'INIT_GAME': {
      const initialBag = createNewTileBag();
      const { newTileBag, takenLetters } = initialBag.takeRandomTiles(7);
      return {
        tileBag: newTileBag,
        troughLetters: takenLetters,
        board: createNewBoard()
      };
    }
    case 'REFRESH_TROUGH': {
      const { newTileBag, takenLetters } = state.tileBag.takeRandomTiles(7);
      return { ...state, tileBag: newTileBag, troughLetters: takenLetters };
    }
    default:
      return state;
  }
}

// 组件内使用：第三个参数负责初始化，仅执行一次
const [state, dispatch] = useReducer(gameReducer, null, () => {
  const initialBag = createNewTileBag();
  const { newTileBag, takenLetters } = initialBag.takeRandomTiles(7);
  return {
    tileBag: newTileBag,
    troughLetters: takenLetters,
    board: createNewBoard()
  };
});

// 点击按钮更新trough的逻辑
const handleRefreshTrough = () => {
  dispatch({ type: 'REFRESH_TROUGH' });
};

为什么之前的尝试无效？ #

• 用useEffect延迟初始化：useEffect在组件渲染完成后执行，初始渲染时状态为空，依赖这些状态的子组件会拿到空值报错。
• 判断tileBag是否存在再初始化：tileBag初始状态未定义，判断逻辑无法阻止初始化函数在重渲染时重复执行，还会导致状态初始化逻辑混乱。

内容的提问来源于stack exchange，提问作者Kyle Ress-Liere