Question

我一直在尝试用本机制作2048类游戏。我想检查游戏的状态是否等于先前的状态，但是先前的状态始终被覆盖。我不是反应专家，所以这可能是一个我看不到的明显错误，但是经过数小时的调试，我无法使其正常工作。

let newState = this.state.gameState;
let previous = this.state.gameState;
console.log(previous) // shows the previous state
// calculate newState
console.log(previous) // the variable previous has changed and is in sync with newState
this.setState({ gameState: newState });

可能还有其他方法可以实现此目的，但这是最简单的方法，我必须重写很多代码才能使其在不进行状态检查的情况下工作。

Answer 1

如果存在多个更新状态的位置，则上述方法可能会导致值不同步。最好的解决方案是将setState()与更新功能一起使用：

this.setState(prevState => {
  const { gameState: prevGameState } = prevState;
  const newGameState = {
    ...prevGameState,
    positionX: prevGameState.positionX + 1,
    // ...
  };
  return { ...prevState, gameState: newGameState };
});

当然，如果您以前的gameState包含数组，对象等，则更新程序将需要更多代码，但思路是相同的：如果需要使用当前状态值来生成新的更新程序，请使用updater函数状态值。

Answer 2

请尝试避免直接更新状态，因为如果直接更改状态，则不会进行重新渲染。

从不直接更改此状态，因为之后调用setState()可能会替换您所做的更改。像对待这个状态一样它是一成不变的。

setState()不会立即使this.state发生突变，而是会创建待处理的状态转换。调用此方法后访问this.state可能会返回现有值。

不能保证对setState的调用可以同步操作，并且可以为提高性能而对调用进行批处理。除非在setState()中实现了条件渲染逻辑，否则shouldComponentUpdate()总是会触发重新渲染。

如果正在使用可变对象，并且无法在shouldComponentUpdate()中实现逻辑，则仅当新状态不同于先前状态时调用setState()才能避免不必要的重新渲染。

示例-

this.setState(prev=>({
   gameState: prev.gameState + 1 
}))

供参考，请查阅官方文档Using State Correctly

无法在本机反应中存储以前的状态

2 个答案: