反应-功能setState（以前的状态）与新的更新值不同吗？

Question

我目前正在尝试React通过最近的几门课程来学习。

要更新状态，大多数课程都建议这样：

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

    this.setState({
      ninjas: updatedNinjas
    });

但是，由于setState是“异步”的，因此官方的反应文档建议使用先前的状态并基于此状态进行更新。

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

两者都解决了同一问题（因为在第一个示例中每次都使用一个新数组）还是只有最后一个万无一失？

Answer 1

如果您的新状态是根据已存在的任何值计算得出的，则应使用setState函数的第二种形式：

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

甚至：

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

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

如果您使用不基于state的任何值的某个变量来更改状态，则可以使用简单的版本：

this.setState({
  answer: 42
});

关于你

因为在第一个示例中我们每次都使用一个新数组

确实，您每次都创建一个新数组，但是您使用了一些项目集来创建它，而这些项目React在幕后执行实际状态更改时可能已经不相关了。