这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

React组件状态

前提：在React hook出来之前，函数式组件是没有自己的状态的，所以先使用类组件来介绍。

1. 初始化状态

• 通过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方法作用
  • a.修改state中的数据状态
  • b.更新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问题

React的状态不可变

概念：不要直接修改状态的值，而是基于当前状态创建新的状态值

1.错误的直接修改

state = {
  count : 0,
  list: [1,2,3],
  person: {
     name:'jack',
     age:18
  }
}
// 直接修改简单类型Number
this.state.count++
++this.state.count
this.state.count += 1
this.state.count = 1

// 直接修改数组
this.state.list.push(123)
this.state.list.spice(1,1)

// 直接修改对象
this.state.person.name = 'rose'

2.基于当前状态创建新值

this.setState({
    count: this.state.count + 1
    list: [...this.state.list, 4],
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})