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

Question

我目前正在尝试通过多门近期课程学习React。

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

 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
});

关于您的

  

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

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

Answer 2

使用数组设置状态有助于我在分页情况下工作，而不会丢失状态中的任何数据

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

Answer 3

由于您是初学者，所以我想向您解释一下。

在下面的代码中

  

... this.state.ninjas

这些... is called spread语法，所以下面的代码片段所要做的就是将现有状态与新项连接起来；结果是重新渲染具有更新状态的组件。

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

    this.setState({
      ninjas: updatedNinjas
    });

至于比较，两者都做同样的事情，React文档建议第一种方法可能会失败，但它并不表示它总是会失败，因为我在1.5年的反应经验中从未见过失败。