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.mzph.cn/news/756749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebSocket 和SSE的区别以及优缺点

WebSocket 和 Server-Sent Events&#xff08;SSE&#xff09;都是用于实现服务器向客户端推送消息的技术&#xff0c;但它们有一些重要的区别&#xff1a; 1.双向 vs 单向&#xff1a;WebSocket 是全双工的&#xff0c;这意味着服务器和客户端可以同时发送和接收消息。而 SSE …

【项目实践Day06】异步请求与同步请求+Ajax+微信小程序上实现发送异步请求

什么是同步和异步 同步 在主线程上排队执行的任务&#xff0c;只有前一个任务执行完毕&#xff0c;才能继续执行下一个任务。也就是一旦调用开始&#xff0c;就必须等待其返回结果&#xff0c;程序的执行顺序和任务排列顺序一致。客户端必须等待服务器端的响应。在等待的期间客…

HTML静态网页成品作业(HTML+CSS)——宠物狗店网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

el-date-picker时间禁用问题

// 选择今天以及今天以后的日期 export const disabledDate (time) > {return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 }设置开始时间小于结束时间&#xff08;不能等于&#xff09; export const disabledDate (date) …

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型 生成式人工智能的采用率显着上升。 在 2022 年 OpenAI ChatGPT 推出的推动下&#xff0c;这项新技术在几个月内就积累了超过 1 亿用户&#xff0c;并推动了几乎所有行业的开发活动激增。 到 2023 年&#xff0c;开发人员…

Covalent Network(CQT)借助最大规模的历史与实时 Web3 数据集,推动人工智能的发展

人工智能在众多领域中增强了区块链的实用性&#xff0c;反之亦然&#xff0c;区块链确保了 AI 模型所使用的数据的来源和质量。人工智能带来的生产力提升&#xff0c;将与区块链系统固有的安全性和透明度融合。 Covalent Network&#xff08;CQT&#xff09;正位于这两项互补技…

设计模式(结构型设计模式——代理模式)

设计模式&#xff08;结构型设计模式——代理模式&#xff09; 代理模式 基本定义 代理模式就是给一个对象提供一个代理&#xff0c;并由代理对象控制对原对象的引用。在代理模式中&#xff0c;“第三者”代理主要是起到一个中介的作用&#xff0c;它连接客户端和目标对象。 …

HarmonyOS NEXT应用开发之Navigation实现多设备适配案例

介绍 在应用开发时&#xff0c;一个应用需要适配多终端的设备&#xff0c;使用Navigation的mode属性来实现一套代码&#xff0c;多终端适配。 效果图预览 使用说明 将程序运行在折叠屏手机或者平板上观看适配效果。 实现思路 本例涉及的关键特性和实现方案如下&#xff1a…

backtrader回测股票:突破20日均线买入,跌破20日均线卖出

数据源&#xff1a;akshare 回测工具&#xff1a;backtrader 策略&#xff1a;突破20日均线买入&#xff0c;跌破20日均线卖出 代码&#xff1a; from datetime import datetime import backtrader as bt #1.9.78.123 import matplotlib.pyplot as plt #3.8.3 import aks…

单片机-点亮LED灯

[2-1] 点亮一个LED_哔哩哔哩_bilibili main()程序执行结束后&#xff0c;单片机会再次执行main()。 不断执行P20xFE;&#xff08;点亮LED灯1&#xff09; #include "reg52.h"void main() {P20xFE; //1111 1110 } 只执行一次P20xFE&#xff1b; #include "r…

数据库只追求性能是不够的!

那些成功的数据库公司没有一家是通过性能比竞争对手更快而成功的。 作者&#xff1a;JORDAN TIGANI&#xff0c;DuckDB 公司 MotherDuck 联合创始人&CEO 本文和封面来源&#xff1a;https://motherduck.com/&#xff0c;爱可生开源社区翻译。 本文约 4500 字&#xff0c;预…

论文阅读之AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE

文章目录 原文链接主要内容模型图技术细节实验结果 原文链接 AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 主要内容 这篇文章的主要内容是介绍了一种新的计算机视觉模型——Vision Transformer&#xff08;ViT&#xff09;&#xff0c;这是…

【iOS ARKit】触发器与触发域

触发器 在上节的示例中&#xff0c;所有可见的物体都参与了物理模拟&#xff0c;但在一些应用中&#xff0c;我们物理模拟&#xff0c;同时又需要了解是否有物体与它们发生了碰撞。如在 AR场景中&#xff0c;当角色靠近一散门时&#xff0c;我们并不希望因为角色与门发生碰撞而…

自然语言处理学习总结

目录 1、词表示 2、语言模型&#xff08;LM&#xff09; 3、常用学习网址 自然语言处理 1、词表示 词表示&#xff1a;自然语言中最基本的语言单位表示成机器理解的方式 方式一&#xff1a;词与词之间的相似度 方式二&#xff1a;词与词之间的关系 词义的表示方法&…

云手机在海外电商中的应用优势

随着海外市场的不断拓展&#xff0c;电商行业对于高效、安全的工具需求日益增长。在这一背景下&#xff0c;云手机作为一种新型服务&#xff0c;为海外电商提供了强大的支持和便利。云手机对传统物理手机起到了非常好的延展和补充作用&#xff0c;拓展了更广泛的应用场景&#…

Kafka整理-Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)的区别是什么?

Apache Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)虽然都是处理消息和数据流的中间件,但它们在设计理念、架构、功能和使用场景方面有显著的区别。下面是Kafka与传统消息队列系统的主要区别: 1. 设计目的和使用场景 Kafka: 设计初衷是为处理大量的实时数据流。强调高…

埃隆·马斯克与OpenAI诉讼案剖析

解析马斯克与OpenAI的法律纠纷 摘要 在人工智能迅速发展的背景下&#xff0c;一场法律纠纷引起了广泛关注&#xff0c;它涉及到了理想主义与商业现实的交汇点。特斯拉创始人埃隆马斯克起诉了他共同创立的人工智能研究组织OpenAI。马斯克认为OpenAI背离了其最初的宗旨&#xf…

RabbitMQ问题

如何实现顺序消费&#xff1f; 消息放入到同一个队列中消费 如何解决消息不丢失&#xff1f; 方案&#xff1a; 如上图&#xff1a;消息丢失有三种情况&#xff0c;解决了以上三种情况就解决了丢失的问题 1、丢失1--->消息在到达交换机的时候&#xff1b;解决&#xff1…

原生html vue3使用element plus 的树tree上移下移案例源码

上效果 html源码 <!DOCTYPE html> <html lang"en"> <!-- * Name: mallSalesReports.html * Description: * Author Lani * date 2024-02-28 18:32:36 --> <head><meta charset"UTF-8"><meta name"viewport" …

docker入门(五)—— 小练习,docker安装nginx、elasticsearch

练习 docker 安装 nginx # 搜素镜像 [rootiZbp15293q8kgzhur7n6kvZ home]# docker search nginx NAME DESCRIPTION STARS OFFICIAL nginx …