Javascript react中这两个状态更新之间的区别是什么？

我正在学习React课程，此时讲师正在解释更新状态，我无法理解这两个片段在内部有何不同，请参见下面的代码笔链接：

在本课中，讲师解释说，第一个片段确实直接更新了状态。 所以我的问题是，如果第一个例子，如讲师所说，直接更新了状态，那么唯一阻止第二个代码片段直接更新状态的就是下面这行：

updatedCounters[index] = {...counter};

---

如果这是真的，它是如何工作的？

在第一个示例中，updatedCounters是this.state.counters的副本，但该副本中的项目引用的是原始文件中完全相同的对象。这可能类似于将一些书籍移动到新的箱子中。容器已更改，但内容未更改。在第二个示例中，您不改变所选计数器，而是先复制计数器，然后改变该副本。

在第一个示例中，updatedCounters是this.state.counters的副本，但该副本中的项目是对原始副本中完全相同的对象的引用。这可能类似于将一些书籍移动到新的箱子中。容器已更改，但内容未更改。在第二个示例中，您不需要对所选计数器进行变异，而是先复制计数器，然后再对其进行变异。

基本上，我自己的问题的答案是，如果不调用setState react，则不会触发必要的例程来更新屏幕上提到第一个示例的组件视图值，如果不调用setState react不会触发必要的例程来更新屏幕上提到第一个示例的组件视图值，当涉及react中的状态修改时，您始终需要记住状态不能发生变化的事实。从技术上讲，你可以这么做，但这是一种不好的做法，而且是一种反模式。您始终希望创建状态的副本，并修改副本而不是原始状态对象。为什么？它确实提高了应用程序的性能，这就是React的巨大优势。这叫做不变性。 你也可以问。。这种方法如何提高性能？ 基本上，由于不变性模式，react不必检查整个state对象。相反，React做了一个简单的引用比较。如果旧状态未引用同一obj。在内存->我们知道状态已经改变。 始终尝试使用.setState以避免以错误的方式更改状态，这就是您在此处要做的：

handleIncrement = counter => {
    const updatedCounters = [...this.state.counters];
    updatedCounters[0].value++;
  };

---

当涉及到React中的状态修改时，您始终需要记住这样一个事实，即状态不能被改变。从技术上讲，你可以这么做，但这是一种不好的做法，而且是一种反模式。您始终希望创建状态的副本，并修改副本而不是原始状态对象。为什么？它确实提高了应用程序的性能，这就是React的巨大优势。这叫做不变性。 你也可以问。。这种方法如何提高性能？ 基本上，由于不变性模式，react不必检查整个state对象。相反，React做了一个简单的引用比较。如果旧状态未引用同一obj。在内存->我们知道状态已经改变。 始终尝试使用.setState以避免以错误的方式更改状态，这就是您在此处要做的：

handleIncrement = counter => {
    const updatedCounters = [...this.state.counters];
    updatedCounters[0].value++;
  };

---

另外，行是错误的，所以你理解它有困难是可以理解的。可能是Hey@EmileBergeron的重复，所以你说这只是因为第一个片段缺少this.setState？顺便说一句，哪一行是错的？所以@emilebergron，我以前看过那篇文章，我知道我必须使用setState，我想如果我能展示我正在观看的视频，我的问题会更有意义，但我无法获得版权。但是，再次访问此链接使我阅读了整个讨论，现在我更清楚地了解了一些事情。谢谢它的帮助。另外，这行是错误的，所以你很难理解。可能是Hey@EmileBergeron的重复，所以你说这只是因为第一个片段缺少this.setState？顺便说一句，哪一行是错的？所以@emilebergron，我以前看过那篇文章，我知道我必须使用setState，我想如果我能展示我正在观看的视频，我的问题会更有意义，但我无法获得版权。但是，再次访问此链接使我阅读了整个讨论，现在我更清楚地了解了一些事情。感谢它的帮助。如果您调用setState，但正在变异旧的状态对象，它最终肯定会失败，因为它在React And De劝阻中是未定义的行为。请注意，手动设置状态的唯一时间是在组件的构造函数处，如果您调用setState，但正在变异旧的状态对象，肯定会失败的

---

通常，由于React和DECASTED中的行为未定义。请注意，手动设置状态的唯一时间是在组件的构造函数处Gabriel Oliveira，这是如何使主题更清晰的没问题，伙计：加布里埃尔·奥利维拉，这是怎么来的？怎么把话题说得更清楚没问题，朋友：谢谢你，米歇尔选择作为正确答案，因为它以最简单的方式直接解释了问题。谢谢你，米歇尔选择作为正确答案，因为它以最简单的方式直接解释了问题

handleIncrement = counter => {
    const updatedCounters = [...this.state.counters];
    updatedCounters[0].value++;
  };