React 中 State 的可视化指南

React 的“state”是最难学习的概念之一。不仅是 state 中应该放什么，还有它实际上是什么，以及它的用途。以及 Redux 与 React state 的关系。

我希望通过这篇文章澄清一些困惑。

你一直在用这个词…

首先，“state”这个词有点含糊。从某种意义上说，“state”指的是应用在屏幕上的当前视觉表现形式。它可以处于“加载”状态，也可以处于“错误”状态。但这并不是它在 React 术语中的真正含义。

在 React 的语境中，“state”是一个表示可以更改的应用部分的对象。每个组件都可以维护自己的 state，它存在于一个名为 this.state 的对象中。

简单来说，如果您想让您的应用做任何事情——如果您想要交互性，添加和删除东西，登录和退出——那将涉及 state。

React State 看起来像什么

想象一下，您有一个应用，在这一刻，看起来像这样

查看此图像，挑出可以随时间变化的部分（是的，基本上就是所有东西）。

现在我们可以给这些东西命名（时间、用电量、室内温度、室外温度），并用一个 JavaScript 对象来描述它们，像这样

{
  currentTime: "2016-10-12T22:25:42.564Z",
  power: {
    min: 0,
    current: 37,
    max: 100
  },
  indoorTemperature: {
    min: 0.0,
    current: 72.0,
    max: 100.0
  },
  outdoorTemperature: {
    min: -10.0,
    current: 84.0,
    max: 120.0
  },
  tempUnits: "F"
}

这个对象描述了整个应用的 state。总而言之，这就是 React 的 state 的作用。

请注意，这些字段与 UI 并不完全对应。没关系。格式化日期、使用最小值和最大值绘制图表以达到正确的比例等等，这很容易。

关键在于：更改 state 对象以更改应用的显示方式。

如何更改 State

如果 state 中的任何内容发生更改……例如，室内温度上升到 75°，应用应该刷新以反映新的现实。这就是 React 在 state 更改时所做的事情：它重新渲染整个应用。

以下是 state 可能会更改的一些原因

• 用户单击或点击一个按钮
• 从服务器接收到一些数据 - 无论是来自 websocket 消息，还是对之前请求的响应
• 计时器触发 - 也许有一个计时器每秒触发一次以更新屏幕上的当前时间

那么，React 是如何知道 state 已经改变的呢？它是否一直在轮询更改？像 Angular 那样监视事件？不。没有那么花哨。

React 知道 state 已经改变，因为你明确地告诉了它，通过从组件内部调用 this.setState。换句话说，没有“魔法”。React 只有在您告诉它时才会重新渲染。

计数器中的 State 更改

上面的家庭监控应用是 state 运行的一个很好的例子，但我要缩小到一个简单的“计数器”应用，以展示 state 如何随时间变化。

它是这样工作的

• 显示一个数字，从 0 开始
• 您点击一个按钮（这会导致调用您指定的 handleClick 函数）
• 计数器递增 1（您调用 setState 使其发生）
• React 响应 state 更改，重新渲染应用

给我看代码

快速回顾

• React 将 state 维护为一个对象
• 您可以通过调用 setState 来更改该对象
• 每次调用 setState 时，React 都会重新渲染

这里还有 2 个更重要的点

• 您不应该直接更改 this.state，永远不要。使用 this.setState。
• State 更改是异步的。如果您在调用 this.setState 之后立即从 this.state 中读取，它可能不会反映更改。

这是上面计数器组件的代码。

使用调试器可视化代码的运行方式

开发工具调试器在追踪错误方面非常有用，但它也是查看代码运行顺序的好方法。在关键位置设置断点并点击“播放”（或刷新）。以下是计数器应用的工作方式

细节，细节

在本文中，我说 state 是一个描述整个应用的单个对象 - 但实际上，它被分解成更小的部分。最好的方法是将 state 保存在“容器”组件中，并将其保留在“呈现”组件之外。

如果您使用 Redux，您实际上将有一个大的 state 对象，它描述了整个应用。这基本上就是 Redux 所做的：一个巨大的对象代表了应用的 state，然后 reducer 和 mapStateToProps 将其分解成与每个组件相关的部分。

希望这有助于您澄清 state。在下面留下任何问题或评论！

React 中 State 的可视化指南 最初由 Dave Ceddia 于 2016 年 10 月 11 日在 Angularity 上发布。

CodeProject