为什么在 React 中使用 setState？

Question

如果我有一个带有一堆属性的 class，那么将我修改的属性放入（例如）this.state.myProp1 而不是 this.myProp1 似乎很麻烦。 然后我需要在将它发送到 setState 之前复制它的任何属性（因为我不能直接对其进行变异）。 例如，像一个对象数组。

在某些时候，我会显示其中的一些属性，这意味着我需要将我的所有 class 属性保存在此 state 中，然后跟踪我需要刷新的内容，而不是刷新整个内容。

我几乎更喜欢改用 this.forceUpdate() 并让我的 render() 直接引用 class 属性。 为什么反应“使”人们使用 this.state 和 setState。 是出于性能原因吗？

Answer 1

setState() 将组件 state 的更改排入队列，并告诉 React 该组件及其子组件需要使用更新的 state 重新渲染。 这是您用来更新用户界面以响应事件处理程序和服务器响应的主要方法。

所以基本上setState是用来告诉 react 什么时候重新渲染。 setState的行为也是异步的，仅在必要时更新 state。 因此，如果您立即多次调用setState ，它将仅在最后一次更新，以最大程度地减少重新渲染的次数并减少对浏览器的负担。 如果没有setState和 react 每次数据变化时都重新渲染，浏览器体验会很糟糕。

如果您不想使用，则不必使用 React this.state和setState 。 您始终可以使用redux或mobx来管理 state。

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的突变。

是的，这就是为什么你必须在我将它发送到 setState 之前复制它的任何属性

Answer 2

恕我直言，组件 state 对于某些特殊情况来说是一个优雅的概念。 例如，当您想实时监控文本输入的内容变化时，即不是在点击保存或提交按钮之后。 在这种情况下，组件 state 将是存储临时输入的理想位置，并且您不会因使用 redux 操作来响应每个不完整的输入而产生开销。 它就像提供性能改进的缓冲区。

Answer 3

一、 setState背后的原因

必须使用setState的主要原因是它的异步执行，来自 react 文档：

React 故意“等待”，直到所有组件在其事件处理程序中调用 setState() 后再开始重新渲染。 这通过避免不必要的重新渲染来提高性能。

If the state object was updated synchronously it would cause consistency issues, since props are not updated until the parent component is re-rendered, so, mutating this.state directly would lead to inconsistency between props and state.

如需进一步参考，您可以查看此Github 线程。

2.这背后的原因this.state

state object 的主要优点是它的不变性，这是组件属性无法实现的，另外还有props和state之间的责任分离，更易于单独处理和更新。

Answer 4

为什么反应“使”人们使用 this.state 和 setState。 是出于性能原因吗？

这是一个很好的问题 - J. Pichardo 的现有答案非常正确，但我想更深入地解决原因 - 而不是什么或如何。

一个更好的问题是 - 为什么 React 存在？ 根据这篇文章

React 的单向数据流使事情变得更简单、更可预测且不易出错。 一种数据流方式极大地简化了您对 state 的思考，因为没有任何视图可以直接改变 state。 视图只能将操作发送到全局 state 存储。

React 之所以成为一个有用的 UI 库，确实有很多原因。 但是关于您的问题 - 单向数据流 - 这是主要原因。

关系 UI 变得复杂。 当应用程序必须使用、显示和更新即使只是少量的关系数据，并在多个元素中显示这些信息时，事情可能会很快变得混乱。

使用 state 和 props 的方式，React 允许人们区分并保证 UI 的一部分是否只会接收要显示的数据，或者它是否也会改变它。

如果您将该数据仅存储在一个随机键中，您将无法真正了解该值是否已更改以及更改了什么。 通过以这种方式将您的 state 从您的组件中分离出来，它可以将数据与元素分离，并使得在元素之间共享数据以及以不同方式更改数据变得更加容易。

根据这篇关于耦合 object 接口的文章，紧密耦合的实体很糟糕，因为：

紧密耦合的 Object 是一个 object 需要了解其他对象并且通常高度依赖于彼此的接口。 当我们在紧密耦合的应用程序中更改一个 object 时，通常需要更改许多其他对象。 在一个小的应用程序中没有问题我们可以很容易地识别出变化。 但在大型应用程序的情况下，并非每个消费者或其他开发人员都知道这些相互依赖关系，或者未来有很多变化的机会。

这也非常适用于 UI 开发。 在我看来，这就是为什么不设置 state 会在以后给你带来一些痛苦。