本文主要是介绍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
这篇关于React——class组件中setState修改state的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
