来自wikipedia

在信息技术和计算机科学中，如果程序旨在记住先前的事件或用户交互，则程序被描述为有状态的;记住的信息称为系统状态。

该引文的重要部分是 记住之前的事件或用户互动 。

在网络应用

中

状态通常存储在某个数据库中。 Web应用程序从数据库中检索“状态”（数据），提供允许用户与状态交互的视图，然后将新的“状态”（数据）发送回数据库。

In react

React可以被认为是向用户呈现应用程序的“状态”。从某处检索数据，react将数据（状态）显示给用户，允许用户修改它，然后将其发送回找到它的位置（记住）。

然而，当人们在反应的背景下谈论“状态”时，他们通常指的是当用户忙于与之交互时，数据的内部表示或反应在内存中的反应。

一个包含某种状态的简单反应组件：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: 'Leeloo'
    };

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const name = (this.state.userName === 'Leeloo') ? 'Korben' : 'Leeloo'
    this.setState({
      userName: name
    })

  }

  render() {
    return ( <
      button onClick = {
        this.handleClick
      } > {
        this.state.userName
      } <
      /button>
    );
  }
}

ReactDOM.render( < Toggle / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在上面的示例中，组件创建了一些状态并将其存储在类的“state”属性中。

它记住了它的内部状态。

当组件呈现时，它会查找存储在状态中的值并将其显示在按钮标签上。单击该按钮时，this.state将更新为“记住”单击按钮的事件。

在功能齐全的Web应用程序中，您将从数据库中检索数据，将数据存储在状态中，允许用户与之交互，然后将数据发送回数据库。

例如，您可能会显示用户个人资料页面，用户更改其姓名，密码，说明等...您将存储他们在该页面上所做的所有更改的“状态”，直到他们点击提交按钮为止。然后，您可以从组件状态收集所有更改并将其发送回数据库进行存储（记住）。

此外，您可能希望将状态存储在react组件中，以描述应用程序的外观应如何基于与其的交互。例如，InputBox组件可能具有hasError状态，而当为true时，会向组件添加红色边框。

如何定义状态？

2 个答案:

来自wikipedia

在网络应用

In react