五、state状态

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

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

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

一、基本使用

• 状态（state）即数据，是组件自己内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据
• 通过this.state来获取状态
• state数据值可以修改：通过this.setState
• state可以定义在类的构造方法中，也可以定义在类的成员属性中

// state定义在类的构造方法中
import React, { Component } from 'react';

class App extends Component {
  // 构造函数初始state
  constructor(props){
    super(props);
    this.state = {
      count: 0
    }
  }
  render(){
    return <div>{this.state.count}</div>
  }
}

export default App;

// state定义在类的成员属性中
import React, { Component } from "react";

class App extends Component {
  // 常规初始化
  state = {
    count: 0,
  }
  render() {
    return <div>{this.state.count}</div>;
  }
}

export default App;

二、修改状态

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

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

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

this.setState(state => {
  return {
    count: state.count + 1,
    // ....
  }
})

2、对象形式

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

注意：

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

三、props与state的区别

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

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

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