React - 组件实例三大属性（state的使用）

一. state 概念

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

二. 需要注意的地方

1. 组件中 render 方法中的 this 为组件实例对象
2. 组件自定义的方法中 this 为undefined，如何解决?
   （1）强制绑定this: 通过函数对象的bind()
   （2）使用箭头函数
3. 状态数据，不能直接修改或更新，要通过setState()进行状态变更

三. 组件中使用state

1. 初始化 state

• 借助constructor构造器初始化state

  constructor(props) {
      super(props)
      this.state = {
          text: "hello,你好！"
      }
  }
  

• 简化定义state，组件中直接定义

  state = {
      text: "hello,你好！"
  }
  

2. 使用 state 中数据

this.state.text

render() {
    return <h1>{this.state.text}</h1>
}

3. 修改 state 中数据

this.setState()

this.setState({ text: "我很好！" })