这篇文章是30天React系列的一部分 。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

State

在Github上编辑此页面

今天我们开始研究有状态组件在React中的工作方式，并了解我们何时以及为何使用状态。

我们几乎完成了在React上运行的第一周。我们已经通过JSX，构建我们的第一个组件，建立父子关系，以及使用React驱动我们的组件属性。我们还有一个主要的想法，我们尚未讨论React，即state的想法。

该state事

反应并没有让我们修改this.props我们有充分的理由的组件。想象一下，如果我们将titleprop 传递给Header组件并且Header组件能够修改它。我们如何知道什么titleIS的的Header组成部分？我们为竞争条件做好准备，混淆数据状态，修改由父组件传递给子组件的变量将是一个全面的坏主意。

但是，有时组件需要能够更新它自己的状态。例如，如果子组件需要显示它被选中或者在秒表上更新计时器，则设置active(活动)标志。

虽然最好props尽可能多地使用，但有时我们需要保持组件的状态。为了解决这个问题，React使我们能够在组件中保持状态。

state在一个组件中，它应该完全是Component的内部和它的子级（即由组件和它使用的任何子级访问）。与我们props在组件中访问的方式类似，可以通过this.state组件访问状态。只要状态发生变化（通过this.setState()函数），组件就会重新渲染。

例如，假设我们有一个显示当前时间的简单时钟组件：

PS:建议看官网效果

传送门

1：21：22 日下午

即使这是一个简单的时钟组件，它仍然保留状态，因为它需要知道当前时间要显示的内容。在不使用的情况下state，我们可以设置一个计时器并重新呈现整个React组件，但页面上的其他组件可能不需要重新呈现......当我们将它集成到更复杂的应用程序中时，这将变得令人头疼并且变得缓慢。

相反，我们可以设置一个计时器来调用组件内部的rerender 并只更改该组件的内部状态。

让我们来构建这个组件吧。首先，我们将创建我们将调用的组件Clock。

在我们进入状态之前，让我们构建组件并创建render()函数。0如果数字小于10，我们需要考虑数字并在数字前面添加零（），并进行am/pm适当的设置。render()函数的最终结果可能如下所示：

class Clock extends React.Component {render() {const currentTime = new Date(),hours = currentTime.getHours(),minutes = currentTime.getMinutes(),seconds = currentTime.getSeconds(),ampm = hours >= 12 ? 'pm' : 'am';return (<div className="clock">{hours == 0 ? 12 :(hours > 12) ?hours - 12 : hours}:{minutes > 9 ? minutes : `0${minutes}`}:{seconds > 9 ? seconds : `0${seconds}`} {ampm}</div>)}
}

替代填充技术

或者，我们可以使用短片段来处理填充时钟时间：

("00" + minutes).slice(-2)

但我们选择使用之前的代码更加清晰。

如果我们渲染我们的新Clock组件，每次组件本身重新渲染时，我们只会获得渲染时间。它还不是一个非常有用的时钟。为了将我们的静态时间显示Clock组件转换为显示时间的时钟，我们需要每秒更新一次。

为此，我们需要跟踪组件状态中的当前时间。为此，我们需要设置初始状态值。

在ES6类样式中，我们可以constructor()通过设置this.state将值设置为组件的初始状态。

  constructor(props) {super(props);this.state = this.getTime();}

构造函数的第一行应始终调用super(props)。如果你忘记了这一点，组件将不会非常喜欢你（即会有错误）。

现在我们this.state在Clock组件中定义了一个，我们可以在render()函数中使用它来引用它this.state。让我们更新我们的render()函数来获取以下值this.state：

class Clock extends React.Component {// ...render() {const {hours, minutes, seconds, ampm} = this.state;return (<div className="clock">{hours === 0 ? 12 :(hours > 12) ?hours - 12 : hours}:{minutes > 9 ? minutes : `0${minutes}`}:{seconds > 9 ? seconds : `0${seconds}`} {ampm}</div>)}
}

我们现在可以更新state组件并将render()功能与数据管理分开，而不是直接使用数据值。

为了更新状态，我们将使用一个名为：的特殊函数setState()，它将触发组件重新渲染。

我们需要调用组件setState()的this值，因为它是React.Component我们子类化的类的一部分。

在我们的Clock组件中，让我们使用本机setTimeout()JavaScript函数创建一个计时器，以this.state在1000毫秒内更新对象。我们将此功能放在一个函数中，因为我们想再次调用它。

class Clock extends React.Component {// ...constructor(props) {super(props);this.state = this.getTime();}// ...setTimer() {clearTimeout(this.timeout);this.timeout = setTimeout(this.updateClock.bind(this), 1000);}// ...updateClock() {this.setState(this.getTime, this.setTimer);}// ...
}

我们将在下一节中介绍生命周期钩子，但是constructor()为了简单起见，我们暂时将其称为。

在updateClock()函数中，我们将要用新时间更新状态。我们现在可以更新updateClock()函数中的状态：

class Clock extends React.Component {// ...updateClock() {this.setState(this.getTime, this.setTimer);}// ...
}

该组件将安装在页面上，并在（大约）一秒（1000毫秒）内更新当前时间。但是，它不会再次重置。我们可以在setTimer()函数结束时再次调用该函数：

class Clock extends React.Component {// ...updateClock() {const currentTime = new Date();this.setState({currentTime: currentTime})this.setTimer();}// ...
}

现在，组件本身可能会重新渲染得比再次调用超时功能慢，这会导致重新出现瓶颈，并且不必要地在移动设备上耗尽宝贵的电池。我们可以将第二个参数传递给setTimer()函数，而不是在调用之后调用this.setState()函数，该this.setState()函数将在状态更新后保证被调用。

class Clock extends React.Component {// ...updateClock() {const currentTime = new Date();this.setState({currentTime: currentTime}, this.setTimer);}// ...
}

1：21：22 日下午

要记住一些事情

• 当我们this.setState()使用对象参数调用时，它将执行数据浅层合并到可用的对象中this.state，然后将重新呈现组件。

• 我们通常只想保留我们将在render()函数中使用的状态值。从上面我们的时钟的例子，请注意，我们的存储hours，minutes以及seconds在我们的国家。将对象或计算存储在我们不打算在render函数中使用的状态通常是一个坏主意，因为它可能导致不必要的渲染和浪费的CPU周期。

正如我们在本节顶部所述，最好props在可用时使用，不仅是出于性能原因，还因为有状态组件更难以测试。

今天，我们已将组件更新为有状态，现在可以处理如何在必要时使组件有状态。明天我们将深入了解组件的生命周期以及何时/如何与页面交互。

学习REACT正确的方法

React和朋友的最新，深入，完整的指南。

下载第一章

❮上一个

下一章：

生命周期钩子

Lifecycle Hooks

https://blog.csdn.net/qq_35812380/article/details/83057330

下一个 ❯

本教程系列的完整源代码可以在GitHub repo上找到，其中包括所有样式和代码示例。

如果您在任何时候感到困难，还有其他问题，请随时通过以下方式与我们联系：

• 在文章末尾评论这篇文章
• 通过react@fullstackreact.com发送电子邮件给我们
• 加入我们的gitter室
• 发送电子邮件至@fullstackreact

---

这个颜色一直没调好

Clock.css

.clock {position: relative;border-radius: 0.5em;margin: 10px auto;background: #10f1d3ee;font-family: 'Open Sans', sans-serif;text-align: center;font-size: 60px;line-height: 2.0em;color: #fff;}

index.js

import React from "react";import ReactDOM from "react-dom";import './Clock.css';class Clock extends React.Component {constructor(props) {super(props);this.state = this.getTime();}componentDidMount() {this.setTimer();}componentWillUnmount() {if (this.timeout) {clearTimeout(this.timeout);}}setTimer() {clearTimeout(this.timeout);this.timeout = setTimeout(this.updateClock.bind(this), 1000);}updateClock() {this.setState(this.getTime, this.setTimer);}getTime() {const currentTime = new Date();return {hours: currentTime.getHours(),minutes: currentTime.getMinutes(),seconds: currentTime.getSeconds(),ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'}}render() {const {hours, minutes, seconds, ampm} = this.state;return (<div className = "clock">{hours === 0 ? 12 :(hours > 12) ?hours - 12 : hours}:{minutes > 9 ? minutes : `0${minutes}`}:{seconds > 9 ? seconds : `0${seconds}`} {ampm}</div>)}}ReactDOM.render(<Clock/>, document.getElementById("demo"));

 

 

学习构建真正的React应用程序

想了解如何在生产应用程序中使用React？点击下面的电子邮件，我们将通过电子邮件向您发送PDF文件，引导您在React中逐步构建应用程序 - 从空文件夹到工作应用程序。

名字

 

电子邮件地址

  发送我的PDF

没有垃圾邮件，很容易取消订阅。

 

Fullstack.io

资源

• Fullstack React博客
• Fullstack React时事通讯
• 预订更新日志
• 封面艺术由TJ Fuller

其他产品

• Fullstack React Book
• Fullstack React Native Book
• 零书反应
• ng-book 2：Angular 2的指南
• ng-newsletter：AngularJS新闻
• 量角器大师班

保持联系

• 有问题吗？
• react@fullstack.io