1、状态就是组件描述某种显示情况的数据，由组件自己设置和更改

2、使用状态的目的就是为了在不同的状态下使组件的显示不同

3、state状态只在class类组件才有，函数组件没有此功能

一、基本使用

  • 状态（state）即数据，是组件自己内部的私有数据，只能在组件内部使用
  • state的值是对象，表示一个组件中可以有多个数据
  • 通过this.state来获取状态
  • state数据值可以修改：通过this.setState
  • state可以定义在类的构造方法中，也可以定义在类的成员属性中
1 // state定义在类的构造方法中
 2 import React, { Component } from 'react';
 3 
 4 class App extends Component {
 5   // 构造函数初始state
 6   constructor(props){
 7     super(props);
 8     this.state = {
 9       count: 0
10     }
11   }
12   render(){
13     return <div>{this.state.count}</div>
14   }
15 }
16 
17 export default App;
1 // state定义在类的成员属性中
 2 import React, { Component } from "react";
 3 
 4 class App extends Component {
 5   // 常规初始化
 6   state = {
 7     count: 0,
 8   }
 9   render() {
10     return <div>{this.state.count}</div>;
11   }
12 }
13 
14 export default App;

二、修改状态

React无法直接修改state，需要使用特殊的更改状态的方法setState，setState会导致组件的重新渲染

  • setState接受2个参数
  • 参数一：负责对自身state进行修改，称为updater
  • 参数二：回调函数，因为setState是异步的，如果想在更新好状态后做进一步处理，此时就可以用到第二个参数了
  • 语法：this.setState(updater, [callback])
  • updater参数传递的时候支持两种形式

1、函数形式（推荐使用 ）

1 this.setState(state => {
2   return {
3     count: state.count + 1,
4     // ....
5   }
6 })

2、对象形式

1 this.setState({
2   count: this.state.count + 1,
3   // ....
4 })

注意：

  • 是否绑定了this
  • 对象形式写法如果针对多个相同的修改操作，会合并掉多余的相同操作，例如：5次+1操作实际上只执行一次，也就有了1+1+1+1+1=1的情况，函数形式 写法不会
  • 修改状态的时候不要使用++/--操作，如果用了就相当于给state直接重新赋值了，这是不允许的

三、props与state的区别

1、props中存储的数据，都是外界传递到组件中的 ，state中的数据是组件内部私有的，外部不能访问也不能修改

2、props中的数据，都是只读的，state中的数据，是可读可写的

3、props在函数声明或类声明的组件中都有，state只有在类声明的组件中才有