React的状态state

在React中，状态和属性都可以实现数据动态化

* 状态 state

在react中，组件内部的数据是通过state来实现和管理

• 可以理解为state就是Vue中的data
• 函数式组件没有自己的state

我们之前使用变量，都是脱离了组件本身，正确来说，组件自身是应该具有私有和独立的数据（状态）的，这个私有的数据和状态就叫做 state，以后，只要说到数据的状态 那么就是指state

1. state的声明和使用

在类组件中，state的声明分为两种方式

1. 类属性的方式声明

 class Person extends Component {
  // 1 声明 state
  state = {
    date: "2008",
    msg: "类属性的方式声明"
  }
  render() {
    return (
      <div>
        {/* 2 使用state */}
        <h1>{this.state.date}</h1>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

2.构造函数中声明

 class Person extends Component {
  // 1 构造函数中 声明 state
  constructor() {
    // 1.1 必须在this之前调用super()方法
    super();
    this.state = {
      date: "2008",
      msg: "构造函数中声明"
    }
  }
  render() {
    return (
      <div>
        {/* 2 使用state */}
        <h1>{this.state.date}</h1>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

2. state的赋值

state的赋值方式通过 this.setState方法 来实现

需要注意的是， 不能 使用 this.state.date= 100 直接修改

 class Person extends Component {
  state = {
    date: 2008
  }

  // 2 事件的声明 要使用箭头函数
  handleClick = () => {
    // 3 获取state中的日期
    let { date } = this.state;
    
    // 4 修改state中的日期
    this.setState({
      date: date + 1
    });

  }
  render() {
    return (
      // 1  绑定事件 事件名必须驼峰命名
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

3. state的赋值是异步的

react为了优化性能，将state的赋值代码 改成异步的方式，可以避免反复的设置state而引发的性能损耗问题。

看看下面打印的值

 class Person extends Component {
  state = {
    date: 2008
  }
  handleClick = () => {
    let { date } = this.state;

    // 1 修改state中的日期 增加 1000
    this.setState({
      date: date + 1000
    });

    // 2 看看这个date是多少
    console.log(this.state.date);
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

有时候，我们希望在一设置值的时候，就希望马上得到最新的state的值，那么可以将代码改为下列的写法

给setState添加一个回调函数，回调中可以获取到修改后的state的值

 class Person extends Component {
  state = {
    date: 2008
  }

  handleClick = () => {
    let { date } = this.state;

    // 添加一个回调函数
    this.setState({
      date: date + 1000
    }, () => {
      // date的值为 3008
      console.log(this.state.date);
    });
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

有时候，setState还可以接收一个函数，函数内可以实时获取state中的值，不存在延迟

 this.setState(preState => {
      console.log("上一次的state", preState.date);
      return {
        date: preState.date + 1000
      }
    })

    this.setState(preState => {
      console.log("上一次的state", preState.date);
      return {
        date: preState.date + 1
      }
    })