Question

以下代码在FB here的reactjs教程的时间旅行部分中：

 jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0,
    });
  }

this.setState在此代码中如何工作？ IMO，它创建Game当前状态的不变副本，并将stepNumber和xIsNext属性合并到其中。这到底如何实现时空旅行？ jumpTo是否不应该在执行此步骤后删除历史记录？

Answer 1

这是本教程中最棘手的部分。 jumpTo重置stepNumber组件的最新状态为Game是正确的。但是，render组件的Game方法使用stepNumber作为索引来从历史记录中检索当前的squares。这确实非常聪明。下面的代码摘录：

render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

因此，问题“在这一步骤之前，jumpTo不会砍掉历史吗？”的答案？是No。同样，如果jumpTo试图修改历史记录，从技术上来讲，时间旅行是不可能的。

还值得注意的是，只要通过单击面板修改了历史步骤，该步骤中的所有“未来”历史都将变为无效。因此，斩波历史记录是通过handleClick方法完成的。来自Game组件的handleClick方法的代码摘录：

handleClick(i) {
   const history = this.state.history.slice(0, this.state.stepNumber + 1);
   const current = history[history.length - 1];
   const squares = current.squares.slice();

ReactJs -TimeTravel-FB教程-jumpTo中的setState如何工作？

1 个答案: