React@16.x（3）核心概念-组件状态

1，组件状态

状态（state）是组件自身维护的数据。在 hooks 出现之前，只有类组件才有状态。

本质上是类的属性，对象类型。

2，状态初始化

2.1，构造函数中

import React, { Component } from 'react'

export default class Tick extends Component {
  constructor(props) {
    super(props) // 传递 props 相当于 this.props = props
    // 初始化状态
    this.state = {
      left: this.props.count,
      loading: true
    }
  }

  render() {
    return <h1>倒计时剩余时间：{this.state.left}</h1>
  }
}

super 的问题

1. 在子类的构造函数 constructor 中，必须执行一次 super() 之后才能使用 this 关键字，直接使用 this 会报错。

原因：
子类自己的 this，必须先通过父类的构造函数完成构造，得到与父类同样的实例属性和方法（也就是继承），然后再对其添加子类自己的实例属性和方法。
而执行super() 就是调用父类的构造函数。所以如果不调用 super()，子类就得不到自己的 this对象。

2. 任何一个类都有 constructor()，没有显示声明时会默认添加该方法，子类中会同时执行 super()。

2.2，公共字段声明

MDN 参考。一个实验性的功能，但可以使用 babel 转义。

ts 中已经实现。

import React, { Component } from 'react'

export default class Tick extends Component {
  state = {
    left: this.props.count,
    loading: true
  }

  render() {
    return <h1>倒计时剩余时间：{this.state.left}</h1>
  }
}

3，状态更改

不能使用 this.state.xxx = x 来直接修改。需要使用 this.setState({xxx: x})。

比如一个计时器：

import React, { Component } from 'react'

export default class Tick extends Component {
  state = {
    left: this.props.count,
    loading: true
  }

  constructor(props) {
    super(props)
    this.timer = setInterval(() => {
      // 重置状态，触发自动的重新渲染
      this.setState({
        left: this.state.left - 1
      })
      if (this.state.left <= 0) {
        clearInterval(this.timer)
      }
    }, 1000)
  }

  render() {
    return <h1>倒计时剩余时间：{this.state.left}</h1>
  }
}

this.setState 原理

该方法是父类 React.Component 的方法，调用它更改状态时，会触发 render 执行，重新渲染。

原理：通过 Object.assign() 将新属性混合到this.state 中，所以相同的属性，旧的会被覆盖。

注意，直接调用 this.render() 是无法触发重新渲染的，所以通过 this.state.xxx = x; this.render() 是无效的。

证明：

import React, { Component } from 'react'

export default class Tick extends Component {
  state = {
    left: this.props.count,
    loading: true
  }

  constructor(props) {
    super(props)
    this.timer = setInterval(() => {
      // this.setState({
      //   left: this.state.left - 1
      // })
      this.state.left = this.state.left - 1
      console.log(this.state.left) // 会递减，但页面上显示的 this.state.left 始终是初始值。
      this.render()
      if (this.state.left <= 0) {
        clearInterval(this.timer)
      }
    }, 1000)
  }

  render() {
    return <h1>倒计时剩余时间：{this.state.left}</h1>
  }
}

4，组件中的数据

1. props：由组件的使用者传递的数据，所有权不属于组件自身，因此组件无法改变该数据。
2. state：由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据。

---

其他参考

以上。