何时使用功能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()调用批处理为单个更新，以获得更好的性能。考虑一下这个简单的例子，要理解这一点，在你的函数中你可以多次调用setStatemyFunction = () => {    ...    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会批量处理此类频繁更新。