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><buttononClick={() => {// 当作登录按钮，登录后显示用户名字this.setState({userInfo: {name: 'hyy',id: '0182310927471'}})}}>登录</button></div>)}
}export default New