javascript - React - 功能 setState(先前状态)与新更新值不同？

Question

我目前正在尝试通过最近的多个类(class)学习 React。

要更新状态，大多数类(class)建议采用这种方式:

 const updatedNinjas = [...this.state.ninjas, newNinja];

    this.setState({
      ninjas: updatedNinjas
    });

但是，由于setState是“异步的”，官方react documentation建议使用之前的状态，并在此基础上进行更新。

this.setState(prevState => ({
      ninjas: [...prevState.ninjas, newNinja]
    }));

两者都在解决同一个问题(因为我们在第一个示例中每次都使用一个新数组)还是只是最后一个是万无一失的？

Answer 1

如果你的新状态是根据任何已经存在的值计算出来的——那么你应该在你使用函数的地方使用第二种形式的setState:

this.setState(prevState => ({
  ninjas: [...prevState.ninjas, newNinja]
}));

甚至:

this.setState(({ninjas}) => ({
  ninjas: [...ninjas, newNinja]
}));

这是因为状态更改是异步的，并且由于性能原因可以批处理。

如果您使用一些不基于状态的任何值的变量更改状态 - 您可以自由使用简单版本:

this.setState({
  answer: 42
});

关于你的

since we use a new array each time in the first example

实际上，您每次都创建了一个新数组，但是您创建它时使用了一些项目集，到那时实际状态更改将由 React 在幕后执行时可能不相关。