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

上一章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);

例子
【React状态state用法详解 – ReactJS实战教程】在本例中，我们将向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;