何时使用功能setState

Question

何时使用功能setState在过去的几天里，我一直在学习React，看一些关于你可以编写不同元素的不同方法的教程和解释。然而，有一个我最好奇的 - setState更新/覆盖state组件属性的功能。例如，假设我有一个具有以下内容的类：class Photos extends React.Component {     constructor() {         super()         state = {             pictures: []         }     }    componentDidMount() {       // This is where the fetch and setState will occur (see below)    }     render() {        return {           <div className="container">              {this.state.pictures}           </div>        }     }}这个例子看到我从API获取图像。鉴于我已经为此函数执行了我的获取，映射和返回 - 然后我将pictures: []使用API调用中获得的结果更新状态数组。我的问题源于我见过的关于如何更新/覆盖图片状态属性的不同方法。我看过它有两种不同的方式：1） 这似乎是一种非常简单易读的方法this.setState({pictures: pics})2） 这更复杂，但我认为它被描述为更安全的方法this.setState(prevState => ({    pictures: prevState.pictures.concat(pics)}))有人可以解释使用其中任何一个的优点吗？我想在未来与代码保持一致，处理道具和状态等，所以最通用的方法当然是首选。

Answer 1

首先，在您的情况下，两种语法完全不同，您可能正在寻找的是两者之间的区别

this.setState({pictures: this.state.picture.concat(pics)})

和

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)}))

要理解为什么第二种方法是首选方法，您需要了解React在内部对setState的作用。

React将首先将您传递的对象合并setState()到当前状态。然后它将开始那个和解的事情。因为呼叫setState()可能不会立即更新您的状态。

React可以将多个setState()调用批处理为单个更新，以获得更好的性能。

考虑一下这个简单的例子，要理解这一点，在你的函数中你可以多次调用setState

myFunction = () => {

   ...
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})

   ...}

这不是一个简单的应用程序中的有效用例，但随着应用程序变得复杂，多个setState调用可能发生在多个地方，做同样的事情。

所以现在为了执行有效的更新，React通过提取传递给每个setState()调用的所有对象来完成批处理，将它们合并在一起形成一个对象，然后使用该单个对象来执行setState()。根据setState文档

如果您尝试在同一周期中多次增加项目数量，则会产生相当于：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...)

后续调用将覆盖同一周期中先前调用的值，因此数量将仅增加一次。如果下一个状态取决于先前的状态，我们建议使用更新程序功能表单

因此，如果任何对象包含相同的键，则存储具有相同键的最后一个对象的键的值。因此更新只发生一次最后一个值

演示代码盒

Answer 2

快速回答：

始终使用setState（）的函数形式。

this.setState((state, props)=>({
    someValue: state.somevalue + 1}));

这种方法不易出错，有助于消除一些非常难以发现的错误。即使react批处理多个此类更新，每个更新都是单独的函数调用，后续更新不会导致某些更新丢失。

另一种方法

this.setState({someValue: state.somevalue + 1});

如果频繁重复，可能会导致某些更新丢失，因为React会批量处理此类频繁更新。