react:组件状态的读取及修改

import React from "react";

// 组件状态
class TestComponents extends React.Component{
  // 1.定义组件状态
  state = {
    // 在这里定义各种属性，全都是当前组件的状态
    name: '状态',
    count: 0,
    list: [1,2,3,4],
    person: {
      name: '姓名',
      age: 12
    }
  }
  
  changeName = () => {
    // 3.修改state中的状态name
    // 注意：不可以直接赋值修改 必须通过一个方法 steState
    this.setState({
      name: '修改状态'
    })
  }

  changeState = () => {
    // 修改count
    // this.setState({
    //   count: this.state.count + 1
    // })
    // 修改数组
    // this.setState({
    //   list: [...this.state.list,5]
    // })
    // 对象修改
    // this.setState({
    //   person: {
    //     ...this.state.person,
    //     age: 23
    //   }
    // })
    // 一次性全部修改
    this.setState({
      count: this.state.count + 1,
      list: [...this.state.list,5],
      person: {
        ...this.state.person,
        age: 23
      }
    })
  }

  // 删除数组中的值
  changeList = () => {
    this.setState({
      list: this.state.list.filter(item => {
        return item !=3
      })
    })
  }

  render() {
    // 2.使用状态
    return <div>
      <div>组件状态</div>
      <div>当前name为: {this.state.name}</div>
      <button onClick={this.changeName}>修改name</button>
      <ul>
        {this.state.list.map(item => 
          <li>{item}</li>
        )}
      </ul>
      <div>count值为:{this.state.count}</div>
      <div>
        姓名：{this.state.person.name}
        年龄：{this.state.person.age}
      </div>
      <button onClick={this.changeState}>点击修改state</button>
      <button onClick={this.changeList}>点击删除list</button>
    </div>
  }
}

function App() {
  return (
    <div className="App">
      <TestComponents/>
    </div>
  );
}

export default App;

 * 总结

 1.编写组件其实就是编写原生js类或者函数

 2.定于状态必须通过state 实例属性的方法 提供一个对象 名称是固定的就叫state

 3.修改state中的任何属性 都不可以直接赋值 必须用steState方法 这个方法来自于继承而得到

 4.这里的this关键词 很容易出现指向错误的问题 上面的写法是最推荐的也是最规范的 没有this指向问题

*注意

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