我应该在 React 中存储大对象的状态吗？

Question

我有一个非常大的 Game 对象，它完全决定了游戏的状态，包括渲染的数据和不渲染的数据。它的嵌套值经常更改。

我是否应该将这个非常大的对象存储在一个状态...

const [game, setGame] = useState(new Game()) // Very large Game object

并在游戏的每次小更新中使用 setGame？例如，

function playerDamage(dmg) {
  const nextState = game.copy();
  nextState.player.health -= dmg;
  setGame(nextState);
}

在我看来，制作 Game 的副本并使用 setGame 对 Game 的每一个小改动都是非常低效的。我的这个假设是否正确，或者 React 和 TS/JS 是否“在幕后”处理得很好？

我想重新表述这个问题：在 React 状态对象中频繁更新深层嵌套值的最佳方法是什么？

Answer 1

是的，如果您复制整个对象：

，您当前的方法可能效率很低
const nextState = game.copy();

如果 game 有那么大，那么频繁进行如此深的复制可能会成为一个问题。但是，对于这种特殊情况，有一个简单的解决方案：不要复制整个东西，只复制需要更改的对象。只有两个对象需要更改（加上新的最终外部状态对象），所以只更改那些，而不是递归复制所有内容。

function playerDamage(dmg) { setGame({ ...game, player: { ...game.player, health: game.player.health - dmg } }); }

这个版本的 playerDamage 函数会很便宜。

Answer 2

也许您应该尝试使用 Redux 来管理状态并使用商店来管理游戏状态。

https://react-redux.js.org/

我应该在 React 中存储大对象的状态吗？

Should I store the state of a large object in React?

javascript

reactjs

react-state