个人做论坛网站新媒体培训
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