【React】静态组件动态组件
目录
- 静态组件
- 动态组件
- 创建一个构造函数(类)
- 使用 `class` 实现组件**
- 使用 `function` 实现类组件**
静态组件
函数组件是静态组件:
- 组件第一次渲染完毕后,无法基于
内部的某些操作让组件更新「无法实现自更新」;但是,如果调用它的父组件更新了,那么相关的子组件也一定会更新「可能传递最新的属性值进来」; - 函数组件具备:属性…「其他状态等内容几乎没有」
- 优势:比类组件处理的机制简单,这样导致函数组件渲染速度更快。
第一次渲染组件,把函数执行
- 产生一个私有的上下文:EC(V)
- 把解析出来的
props「含children」传递进来「但是被冻结了」 - 对函数返回的JSX元素「virtualDOM」进行渲染
- 当我们点击按钮的时候,会把绑定的小函数执行:
- 修改上级上下文EC(V)中的变量
- 私有变量值发生了改变
- 但是
视图不会更新
真实项目中,有这样的需求:第一次渲染就不会再变化的,可以使用函数组件。 但是大部分需求,都需要在第一次渲染完毕后,基于组件内部的某些操作,让组件可以更新,以此呈现出不同的效果,也就是动态组件「类组件、Hooks组件(在函数组件中,使用Hooks函数)」
const Vote = function Vote(props) {let { title } = props;let supNum = 10,oppNum = 5;return <div className="vote-box"><div className="header"><h2 className="title">{title}</h2><span>{supNum + oppNum}人</span></div><div className="main"><p>支持人数:{supNum}人</p><p>反对人数:{oppNum}人</p></div><div className="footer"><button onClick={() => {supNum++;console.log(supNum);}}>支持</button><button onClick={() => {oppNum++;console.log(oppNum);}}>反对</button></div></div>;
};
export default Vote;
可以看到,点击之后,页面并没有变化

动态组件
类组件是“动态组件”:
- 组件在第一渲染完毕后,除了父组件更新可以触发其更新外,我们还可以通过:
this.setState修改状态 或者this.forceUpdate等方式,让组件实现“自更新”!! - 类组件具备:属性、状态、周期函数、ref…「几乎组件应该有的东西它都具备」
- 优势:功能强大。
Hooks组件「推荐」
- 具备了函数组件和类组件的各自优势,在函数组件的基础上,基于hooks函数,让函数组件也可以拥有状态、周期函数等,让函数组件也可以实现自更新「动态化」。
创建一个构造函数(类)
- 要求必须继承React.Component/PureComponent这个类
- 通常使用使用ES6中的class创建类「因为方便」
- 必须给当前类设置一个render的方法「放在其原型上」:在render方法中,返回需要渲染的视图
//import React .... : 把基于export default导出的内容获取到
//import { Component, PureComponent } .... : 不是对React对象做解构赋值,而是把基于 export function Component(){} 一个个导出的内容,做解构赋值import React, { Component, PureComponent } from "react";
这里展示在 React 中使用类和函数两种方式来实现组件。
使用 class 实现组件**
通过 ES6 class 类来定义的。Vote 类继承了 React.Component,并通过 export default 导出。
class Vote extends React.Component {render() {return <div>投票组件</div>;}
}
export default Vote;
使用 function 实现类组件**
使用传统的 JavaScript 函数,通过 Object.setPrototypeOf 来使该函数继承 React.Component,从而具备 React 组件的能力。
function AAA() {React.Component.call(this); // 手动绑定 React.Component 的上下文,模拟了类的构造器。this.state = { x: 10, y: 20 };
}
//设置 `AAA` 函数的原型链,使得它继承了 `React.Component` 的原型,从而具备了 React 组件的行为
Object.setPrototypeOf(AAA.prototype, React.Component.prototype); // 设置原型链AAA.prototype.sum = function () { /* 自定义方法 */ };
相关文章:
【React】静态组件动态组件
目录 静态组件动态组件创建一个构造函数(类)使用 class 实现组件**使用 function 实现类组件** 静态组件 函数组件是静态组件: 组件第一次渲染完毕后,无法基于内部的某些操作让组件更新「无法实现自更新」;但是,如果调用它的父组…...
深度学习中的卷积和反卷积(四)——卷积和反卷积的梯度
本系列已完结,全部文章地址为: 深度学习中的卷积和反卷积(一)——卷积的介绍 深度学习中的卷积和反卷积(二)——反卷积的介绍 深度学习中的卷积和反卷积(三)——卷积和反卷积的计算 …...
ASP.NET Core - IStartupFilter 与 IHostingStartup
ASP.NET Core - IStartupFilter 与 IHostingStartup 1. IStartupFilter2 IHostingStartup2.5.1 创建外部程序集2.5.2 激活外部程序集 1. IStartupFilter 上面讲到的方式虽然能够根据不同环境将Startup中的启动逻辑进行分离,但是有些时候我们还会可以根据应用中的功能…...
【零基础租赁实惠GPU推荐及大语言模型部署教程01】
租赁GPU推荐及大语言模型部署简易教程 1 官网地址2 注册账号及登录3 租用GPU3.1 充值(不限制充值最低金额,1元亦可)3.2 容器实例(实际就是你租用的GPU电脑)3.3 选择镜像(选择基础环境:框架版本和…...
接口传参 data格式和json格式区别是什么
接口传参 data格式和json格式区别是什么 以下是接口传参 data 格式和 JSON 格式的区别: 定义和范围 Data 格式: 是一个较为宽泛的概念,它可以指代接口传递参数时所使用的任何数据的组织形式。包括但不限于 JSON、XML、Form 数据、纯文本、二进…...
踏上 C++ 编程之旅:开篇之作
踏上 C 编程之旅:开篇之作 在计算机编程的广袤天地中,C 宛如一座巍峨的高峰,吸引着无数开发者攀登探索。今天,就让我们一同开启这段充满挑战与惊喜的 C 编程之旅,在代码的世界里开辟属于自己的道路。 一、为什么选择…...
docker在不删除容器的情况下修改端口映射
注意:必须先停止docker服务!!!! 1) 停止容器 2) 停止docker服务(systemctl stop docker) 3) 修改这个容器的hostconfig.json和config.v2.json文件中的端口 先查看容器id docker inspect jenkins 进入该目录 hostcon…...
Mysql tinyint与Java的数据类型的对应关系
参考资料 理解误区——mysql中tinyint与Java的数据类型的对应关系;tinyint(1) 与tinyint(4)的区别 1.1 tinyint字段取值 数据库字段类型为 tinyint,值为0或1,直接通过SQL语句查询的话,0会取出false;1会取出true目前就想取出的结果为 0 或 1 selectpg_id ,pg_name…...
mac intel芯片下载安卓模拟器
一、调研 目前主流两个模拟器: 雷神模拟器 不支持macosmumu模拟器pro版 不支持macos intel芯片 搜索到mumu的Q&A中有 “Intel芯片Mac如何安装MuMu?” q&a🔗:https://mumu.163.com/mac/faq/install-on-intel-mac.html 提…...
掌握 Ubuntu 终端 mv 与 rename 命令的高效重命名使用方法
在日常的计算任务中,文件重命名是一个经常性的需求。对于熟悉图形用户界面(GUI)的人来说,通过右键点击并选择“重命名”选项,这个过程简单直接。然而,当涉及到大量文件或需要自动化流程时,命令行…...
【Python】数据容器:列表,元组,字符串,集合字典及通用操作
文章目录 一.序列1.1list列表定义常用操作列表的遍历 1.2tuple元组定义常见操作元组的遍历 1.3str字符串定义常见操作字符串的遍历 1.4序列常用操作——切片 二.set集合定义常见操作集合的遍历 三.dict字典定义常用操作字典的嵌套 *数据容器对比总结四.数据容器的通用操作4.1通…...
基于Oracle与PyQt6的电子病历多模态大模型图形化查询系统编程构建
一、引言 1.1 研究背景阐述 在当今数字化时代,医疗行业正经历着深刻的变革,数字化转型的需求日益迫切。电子病历(EMR)作为医疗信息化的核心,其管理的高效性和数据利用的深度对于提升医疗服务质量、优化临床决策以及推动医学研究具有至关重要的意义。传统的电子病历管理系…...
2025智能网联汽车数据分类分级白皮书
智能网联汽车作为现代交通技术的重要成果,其核心特征之一是产生了大量的、多样化的数据,这些数据不仅对提升车辆性能和用户体验至关重要,对维护交通安全、推动智能交通系统的发展具有深远影响。在数字经济时代,数据的价值日益凸显…...
使用Dify创建个问卷调查的工作流
为啥要使用Dify创建工作流呢?一个基于流程的智能体的实现,特别是基于业务的实现,使用Dify去实现时,通常都是一个对话工作流,当设计到相对复杂一些的流程时,如果将所有逻辑都放在对话工作流中去实现…...
紫光无人机AI飞控平台介绍
随着无人机技术的迅猛发展,无人机飞控平台的智能化需求不断提升。紫光无人机AI飞控平台作为一款创新型产品,为用户提供了从飞行控制到任务管理的一站式解决方案,尤其在AI实时识别和事件分析方面具有显著优势。本文将介绍平台的核心功能、技术…...
UI自动化测试:异常截图和page_source
自动化测试过程中,是否遇到过脚本执行中途出错却不知道原因的情况?测试人员面临的不仅是问题的复现,还有对错误的快速定位和分析。而异常截图与页面源码(Page Source)的结合,正是解决这一难题的利器。 在实…...
47,【5】BUUCTF web lovesql
进入靶场 可知是单引号闭合,属于字符串型注入 则后续方法与字符串型无异 使用order by 判断出字节数为3 使用union select寻找注入点时切记第一个select为空 库名geek 表名group_concat(table_name) from information_schema.tables where table_schemageek# geek…...
网络安全——常用语及linux系统
一、网络安全概念及法规 网络安全:网络空间安全 cyber security 信息系统:由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度组成的已处理信息流为目的的人机一体化系统 信息系统安全三要素(CIA) 保密…...
json().get() 和 json[““] 的区别
以下是 json().get() 和 json[“”] 的区别: 使用方法和语法 json[“”]: 这是使用字典的索引操作符 [] 来访问 JSON 数据。假设 json 是一个字典,你可以通过 json[“key”] 的方式来获取对应 key 的值。 示例: python import js…...
深入解析CSS属性值计算:从声明到渲染的完整流程
目录 引言1. 确定声明值2. 层叠冲突3. 使用继承4. 使用默认值总结 引言 在网页开发中,理解CSS属性值的计算过程对于开发者来说至关重要。它不仅影响页面样式的最终呈现,还涉及到浏览器如何解析和应用样式规则。本文将深入探讨从无属性值到每个属性都有…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
