React——class组件中setState修改state

class组件中通过state去存储当前组件的数据，那怎么对其进行修改呢？就是方法this.setState({ 要修改的部分数据 })

setState() 作用：1 、修改 state 内容；2 、更新 UI

特别注意：react的核心其实是虚拟dom（数据），那么我们要尽量避免直接手动 DOM（视图），那当我们在修改state的时候只关心我们的数据，也就是数据驱动视图的核心。

表格整理还不完整，仅帮助理解	React	vue2	vue3
核心	数据驱动视图	响应式原理Object.defineProperty	代理Proxy
直接改state数据，this.state.xxx = 1	数据会变化，但视图不会发生变化	监听数据变化，变化了视图也会变化	监听数据变化，变化了视图也会变化
响应式方法	setState()	Vue.$set

import { Component } from 'react'

class New extends Component {
  state = {
    userInfo: {
      name: '',
      id: ''
    }
  }

  render () {
    return (
      <div>
        <span>用户：{this.state.userInfo.name}</span>
        <button
          onClick={() => {
            // 当作登录按钮，登录后显示用户名字
            this.setState({
              userInfo: {
                name: 'hyy',
                id: '0182310927471'
              }
            })
          }}
        >
          登录
        </button>
      </div>
    )
  }
}

export default New