当前位置: 首页 > news >正文

React——class组件中setState修改state

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

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

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

表格整理还不完整,仅帮助理解Reactvue2vue3
核心数据驱动视图响应式原理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
http://www.lryc.cn/news/321402.html

相关文章:

  • 搭建基于 Snowflake 的 CI/CD 最佳实践!
  • 数据结构(五)——树的基本概念
  • 2.28CACHE,虚拟存储器
  • 深入理解栈和队列(一):栈
  • electron-builder 打包问题,下载慢解决方案
  • (简单成功)Mac:命令设置别名
  • Grok-1:参数量最大的开源大语言模型
  • Python 自然语言处理库之stanza使用详解
  • 计算机网络:数据交换方式
  • 万用表革新升级,WT588F02BP-14S语音芯片助力智能测量新体验v
  • Day61:WEB攻防-PHP反序列化原生类TIPSCVE绕过漏洞属性类型特征
  • 【开源】SpringBoot框架开发不良邮件过滤系统
  • 详细教---用Django封装写好的模型
  • 设计模式 抽象工厂
  • OPTIONS请求(跨域预检查)
  • 游戏反云手机检测方案
  • HarmonyOS NEXT应用开发之动态路由
  • wayland(xdg_wm_base) + egl + opengles 使用 Assimp 加载带光照信息的材质文件Mtl 实现光照贴图的最简实例(十七)
  • 【NLP笔记】Transformer
  • 【Unity】程序创建Mesh(二)MeshRenderer、光照、Probes探针、UV信息、法线信息
  • 每日一练:LeeCode-167. 两数之和 II - 输入有序数组【双指针】
  • 性能优化(CPU优化技术)-NEON指令详解
  • 服务器硬件基础知识和云服务器的选购技巧
  • 深度学习PyTorch 之 transformer-中文多分类
  • STC 51单片机烧录程序遇到一直检测单片机的问题
  • 后端系统开发之——接口参数校验
  • IDEA 配置阿里规范检测
  • 数据仓库系列总结
  • gitlab runner没有内网的访问权限应该怎么解决
  • el-tree 设置默认展开指定层级