React状态state用法详解 – ReactJS实战教程

上一章ReactJS实战教程请查看：React组件Component用法解析

状态state是一个可更新的结构，用于包含关于组件的数据或信息。组件中的状态可以随时间改变。状态随时间的变化可以作为对用户操作或系统事件的响应发生。具有状态的组件称为有状态组件。react组件的核心决定了组件的行为及其呈现方式。它们还负责使组件具有动态性和交互性。

状态必须尽可能简单。它可以通过使用setState()方法和调用setState()方法触发UI更新来设置。状态表示组件的本地状态或信息，它只能在组件内部或由组件直接访问或修改。要在发生任何交互之前设置初始状态，需要使用getInitialState()方法。

例如，如果我们有5个组件需要来自状态的数据或信息，那么我们需要创建一个容器组件来保持所有组件的状态。

定义状态

要定义状态，必须首先声明用于定义组件初始状态的默认值集。为此，添加一个类构造函数，它使用this.state分配初始状态，this.state的属性可以在render()方法中渲染。

例子

下面的示例代码展示了如何使用ES6语法创建有状态组件。

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();        
      this.state = { displayBio: true };  
      }  
      render() {  
          const bio = this.state.displayBio ? (  
              <div>  
                  <p><h3>srcmini - IT开发教程网</h3></p>   
            </div>  
              ) : null;  
              return (  
                  <div>  
                      <h1> Welcome to srcmini!! </h1>  
                      { bio }   
                  </div>  
              );  
     }  
}  
export default App;  

要设置状态，需要调用构造函数中的super()方法，这是因为在调用super()方法之前，状态未初始化。

更改状态

我们可以使用setState()方法来更改组件状态，并传递一个新的状态对象作为参数。现在，在上面的例子中创建一个新的方法toggleDisplayBio()，并将这个关键字绑定到toggleDisplayBio()方法上，否则我们无法在toggleDisplayBio()方法中访问它。

this.toggleDisplayBio = this.toggleDisplayBio.bind(this);  

例子

在本例中，我们将向render()方法添加一个按钮。单击此按钮将触发toggleDisplayBio()方法，该方法将显示所需的输出。

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();        
      this.state = { displayBio: false };  
      console.log('Component this', this);  
      this.toggleDisplayBio = this.toggleDisplayBio.bind(this);  
      }  
      toggleDisplayBio(){  
          this.setState({displayBio: !this.state.displayBio});  
          }  
      render() {  
          return (  
              <div>  
                  <h1>Welcome to srcmini!!</h1>  
                  {  
                      this.state.displayBio ? (   
                          <div>  
                              <p><h4>Jsrcmini - IT开发教程网</h4></p>  
                              <button onClick={this.toggleDisplayBio}> 显示更少</button>  
                        </div>  
                          ) : (  
                              <div>  
                                  <button onClick={this.toggleDisplayBio}>显示更多</button>  
                              </div>  
                          )  
                  }  
             </div>  
        )  
    }  
}  
export default App;