组件状态

初始化状态

通过class的实例属性state来初始化

state的值是一个对象结构，表示一个组件可以有多个数据状态

class Counter extends React.Component {

  // 初始化状态

  state = {

    count: 0

  }

  render() {

    return <button>计数器</button>

  }

}

2. 读取状态

通过this.state来获取状态

class Counter extends React.Component {

  // 初始化状态

  state = {

    count: 0

  }

  render() {

    // 读取状态

    return <button>计数器{this.state.count}</button>

  }

}

3. 修改状态

语法

this.setState({ 要修改的部分数据 })

setState方法作用

修改state中的数据状态

更新UI

思想

数据驱动视图，也就是只要修改数据状态，那么页面就会自动刷新，无需手动操作dom

注意事项

不要直接修改state中的值，必须通过setState方法进行修改

class Counter extends React.Component {

  // 定义数据

  state = {

    count: 0

  }

  // 定义修改数据的方法

  setCount = () => {

    this.setState({

      count: this.state.count + 1

    })

  }

  // 使用数据 并绑定事件

  render () {

    return <button onClick={this.setCount}>{this.state.count}</button>

  }

}

this问题说明

这里我们作为了解内容，随着js标准的发展，主流的写法已经变成了class fields，无需考虑太多this问题