react 学习笔记二:ref、状态、继承

news2024/11/26 14:34:16

基础知识

1、ref

        创建变量时,需要运用到username = React.createRef(),并将其绑定到对应的节点。在使用时需要获取当前的节点;

        注意:vue直接使用里面的值,不需要再用this。

2、状态

        组件描述某种显示情况的数据,有组件自己设置和更改。

        setState:修改state的状态。

        注意:state是关键词。不能修改,赋值为一个对象。

        vue是想js一样,正常的定义就可以了,不需要再专门使用state,这里的state和pina,vuex的逻辑相似。

3、继承

        react使用构造函数,需要继承父级,所以需要使用super方法。

//state 关键字,是固定的
    constructor(){
        //继承
        super()
    }

遇到的问题

1、ReactDOM.render is no longer supported in React 18. Use createRoot instead.

解决方案:

2、Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

总结

        react和vue之间有好多的相似之处,但又有些细微的差别。在学习中,成长吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1632158.html

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

相关文章

[ACTF2020 新生赛]BackupFile 1 [极客大挑战 2019]BuyFlag 1 [护网杯 2018]easy_tornado 1

目录 [ACTF2020 新生赛]BackupFile 1 1.打开页面,叫我们去找源文件 2.想到用disearch扫描,发现源文件index.php.bak 3.访问这个文件,下载一个文件,用记事本打开 4.翻译php代码 5.构造payload url/?key123,得到fl…

【哈希】Leetcode 面试题 01.02. 判定是否互为字符重排

题目讲解 面试题 01.02. 判定是否互为字符重排 算法讲解 直观的想法:我们找到一个字符串的全排列,然后对比当前的排列是否等于另一个字符串。如果两个字符串如果互为排列,所以我们知道两个字符串对应的字符出现的个数相同,那么…

Windows 容器镜像踩坑记录

为什么研究windows容器?emm,公司需要,不想多说。 dotnet后端 问题描述: 基于mcr.microsoft.com/dotnet/aspnet:6.0镜像撰写dockerfile编译.net core后端项目后运行容器出现类库不存在问题: 程序中使用了fastreport&a…

编写你的第一个 golang 的应用程序

进行你的第一个golang的程序 当你把程序都安装好以后 环境变量配置 好 vscode 插件下载好以后 1. 创建一个test.go 的文件 //主包,可执行文件所在包 package main//导入包 import "fmt"//主函数,入口函数 func main() { }2.解释 需要导入包 …

Linux PTP学习

前言 本文是对Linux PTP的学习记录,不足之处请指出。Linux PTP用于在Linux系统的精确时钟同步,支持IEEE 1588 Precision Time Protocol(PTP)标准,目的是实现在网络中,设备之间的高精度时间同步。它是一个工…

Meta分析在生态环境领域里的应用教程

原文链接:Meta分析在生态环境领域里的应用教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247602936&idx4&sn50c2b3141baaa8635905fc405767d6ed&chksmfa82131fcdf59a09b57750e50657b2a06706f3b46806fc7ef5341d16701b99a14d4f7d82d3b9&am…

【算法】搜索插入位置

本题来源---《搜索插入位置》 题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1…

02.Kafka部署安装

1 Linux 安装 Kafka 1.1 安装前的环境准备 由于 Kafka 是用 Scala 语言开发的,运行在 JVM 上,因此在安装Kafka之前需要先安装JDK。 yum install java-1.8.0-openjdk* -y kafka 依赖 zookeeper,所以需要先安装 zookeeper。 wget https://ar…

2024深圳杯(东北三省)数学建模C题完整论文讲解(含完整python代码及所有残骸音爆位置求解结果)

大家好呀,从发布赛题一直到现在,总算完成了2024深圳杯(东北三省数学建模联赛)A题多个火箭残骸的准确定位完整的成品论文。 本论文可以保证原创,保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊…

Redis哈希槽和一致性哈希

前言 单点的Redis有一定的局限: 单点发生故障,数据丢失,影响整体服务应用自身资源有限,无法承载更多资源分配并发访问,给服务器主机带来压力,性能瓶颈 我们想提升系统的容量、性能和可靠性,就…

HTML 学习笔记

html 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 1.HTML文档的后缀名 (1) .html (2) .htm 这里更推荐使用 ".html ",命名应该遵从含义清…

人脸识别系统架构

目录 1. 系统架构 1.1 采集子系统 1.2 解析子系统 1.3 存储子系统 1.4 比对子系统 1.5 决策子系统 1.6 管理子系统 1.7 应用开放接口 2. 业务流程 2.1 人脸注册 2.2 人脸验证 2.2.1 作用 2.2.2 特点 2.2.3 应用场景 2.3 人脸辨识 2.3.1 作用 2.3.2 特点 2.3.3…

常用算法代码模板 (3) :搜索与图论

AcWing算法基础课笔记与常用算法模板 (3) ——搜索与图论 常用算法代码模板 (1) :基础算法 常用算法代码模板 (2) :数据结构 常用算法代码模板 (3) :搜索与图论 常用算法代码模板 (4) :数学知识 文章目录 0 搜索技巧1 树与图的存…

网络编程——TCP

socket socket类型 流式套接字(SOCK_STREAM) TCP 提供了一个面向连接、可靠的数据传输服务,数据无差错、无重复、无丢失、无失序的发送且按发送顺序接收。内设置流量控制,避免数据流淹没慢的接收方。数据被看作是字节流,无长度限制。 数据报…

学习STM32第二十天

低功耗编程 一、修改主频 STM32F4xx系列主频为168MHz,当板载8MHz晶振时,系统时钟HCLK满足公式 H C L K H S E P L L N P L L M P L L P HCLK \frac{HSE \times PLLN}{PLLM \times PLLP} HCLKPLLMPLLPHSEPLLN​,在文件stm32f4xx.h中可修…

寝室快修|基于SprinBoot+vue的贵工程寝室快修小程序(源码+数据库+文档)

贵工程寝室快修目录 目录 基于SprinBootvue的贵工程寝室快修小程序 一、前言 二、系统设计 三、系统功能设计 1学生信息管理 2 在线报修管理 3公告信息管理 4论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&a…

基于SpringBoot+Vue校园竞赛管理系统的设计与实现

项目介绍: 传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,竞赛信息因为其管理内容繁杂,管理数量繁多导致手工进行…

Android 学习 鸿蒙HarmonyOS 4.0 第二天(项目结构认识)

项目结构认识 和 了解: 工程目录下的结构如下: 首先能看到有两个.开头的文件,分别是.hvigor 和 .idea。这两个文件夹都是与构建有关系的, 如果你开发过安卓app,构建完会生成一个apk安装包,鸿蒙则是生成hap…

IDEA新版本创建Spring项目只能勾选17和21却无法使用Java8的完美解决方案

想创建一个springboot的项目,使用Spring Initializr创建项目时,发现版本只有17~21,无法选择Java8。 我们知道IDEA页面创建Spring项目,其实是访问spring initializr去创建项目。我们可以通过阿里云国服间接创建Spring项…

MATLAB 运算符

MATLAB 运算符 运算符是一个符号,告诉编译器执行特定的数学或逻辑操作。MATLAB设计为主要在整个矩阵和数组上运行。因此,MATLAB中的运算符既可以处理标量数据,也可以处理非标量数据。MATLAB允许以下类型的基本运算- 算术运算符 关系运算符…