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

【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 实现类组件** 静态组件 函数组件是静态组件&#xff1a; 组件第一次渲染完毕后&#xff0c;无法基于内部的某些操作让组件更新「无法实现自更新」&#xff1b;但是&#xff0c;如果调用它的父组…...

深度学习中的卷积和反卷积(四)——卷积和反卷积的梯度

本系列已完结&#xff0c;全部文章地址为&#xff1a; 深度学习中的卷积和反卷积&#xff08;一&#xff09;——卷积的介绍 深度学习中的卷积和反卷积&#xff08;二&#xff09;——反卷积的介绍 深度学习中的卷积和反卷积&#xff08;三&#xff09;——卷积和反卷积的计算 …...

ASP.NET Core - IStartupFilter 与 IHostingStartup

ASP.NET Core - IStartupFilter 与 IHostingStartup 1. IStartupFilter2 IHostingStartup2.5.1 创建外部程序集2.5.2 激活外部程序集 1. IStartupFilter 上面讲到的方式虽然能够根据不同环境将Startup中的启动逻辑进行分离&#xff0c;但是有些时候我们还会可以根据应用中的功能…...

【零基础租赁实惠GPU推荐及大语言模型部署教程01】

租赁GPU推荐及大语言模型部署简易教程 1 官网地址2 注册账号及登录3 租用GPU3.1 充值&#xff08;不限制充值最低金额&#xff0c;1元亦可&#xff09;3.2 容器实例&#xff08;实际就是你租用的GPU电脑&#xff09;3.3 选择镜像&#xff08;选择基础环境&#xff1a;框架版本和…...

接口传参 data格式和json格式区别是什么

接口传参 data格式和json格式区别是什么 以下是接口传参 data 格式和 JSON 格式的区别&#xff1a; 定义和范围 Data 格式&#xff1a; 是一个较为宽泛的概念&#xff0c;它可以指代接口传递参数时所使用的任何数据的组织形式。包括但不限于 JSON、XML、Form 数据、纯文本、二进…...

踏上 C++ 编程之旅:开篇之作

踏上 C 编程之旅&#xff1a;开篇之作 在计算机编程的广袤天地中&#xff0c;C 宛如一座巍峨的高峰&#xff0c;吸引着无数开发者攀登探索。今天&#xff0c;就让我们一同开启这段充满挑战与惊喜的 C 编程之旅&#xff0c;在代码的世界里开辟属于自己的道路。 一、为什么选择…...

docker在不删除容器的情况下修改端口映射

注意&#xff1a;必须先停止docker服务&#xff01;&#xff01;&#xff01;&#xff01; 1) 停止容器 2) 停止docker服务(systemctl stop docker) 3) 修改这个容器的hostconfig.json和config.v2.json文件中的端口 先查看容器id docker inspect jenkins 进入该目录 hostcon…...

Mysql tinyint与Java的数据类型的对应关系

参考资料 理解误区——mysql中tinyint与Java的数据类型的对应关系&#xff1b;tinyint(1) 与tinyint(4)的区别 1.1 tinyint字段取值 数据库字段类型为 tinyint,值为0或1,直接通过SQL语句查询的话,0会取出false;1会取出true目前就想取出的结果为 0 或 1 selectpg_id ,pg_name…...

mac intel芯片下载安卓模拟器

一、调研 目前主流两个模拟器&#xff1a; 雷神模拟器 不支持macosmumu模拟器pro版 不支持macos intel芯片 搜索到mumu的Q&A中有 “Intel芯片Mac如何安装MuMu&#xff1f;” q&a&#x1f517;&#xff1a;https://mumu.163.com/mac/faq/install-on-intel-mac.html 提…...

掌握 Ubuntu 终端 mv 与 rename 命令的高效重命名使用方法

在日常的计算任务中&#xff0c;文件重命名是一个经常性的需求。对于熟悉图形用户界面&#xff08;GUI&#xff09;的人来说&#xff0c;通过右键点击并选择“重命名”选项&#xff0c;这个过程简单直接。然而&#xff0c;当涉及到大量文件或需要自动化流程时&#xff0c;命令行…...

【Python】数据容器:列表,元组,字符串,集合字典及通用操作

文章目录 一.序列1.1list列表定义常用操作列表的遍历 1.2tuple元组定义常见操作元组的遍历 1.3str字符串定义常见操作字符串的遍历 1.4序列常用操作——切片 二.set集合定义常见操作集合的遍历 三.dict字典定义常用操作字典的嵌套 *数据容器对比总结四.数据容器的通用操作4.1通…...

基于Oracle与PyQt6的电子病历多模态大模型图形化查询系统编程构建

一、引言 1.1 研究背景阐述 在当今数字化时代,医疗行业正经历着深刻的变革,数字化转型的需求日益迫切。电子病历(EMR)作为医疗信息化的核心,其管理的高效性和数据利用的深度对于提升医疗服务质量、优化临床决策以及推动医学研究具有至关重要的意义。传统的电子病历管理系…...

2025智能网联汽车数据分类分级白皮书

智能网联汽车作为现代交通技术的重要成果&#xff0c;其核心特征之一是产生了大量的、多样化的数据&#xff0c;这些数据不仅对提升车辆性能和用户体验至关重要&#xff0c;对维护交通安全、推动智能交通系统的发展具有深远影响。在数字经济时代&#xff0c;数据的价值日益凸显…...

使用Dify创建个问卷调查的工作流

为啥要使用Dify创建工作流呢&#xff1f;一个基于流程的智能体的实现&#xff0c;特别是基于业务的实现&#xff0c;使用Dify去实现时&#xff0c;通常都是一个对话工作流&#xff0c;当设计到相对复杂一些的流程时&#xff0c;如果将所有逻辑都放在对话工作流中去实现&#xf…...

紫光无人机AI飞控平台介绍

随着无人机技术的迅猛发展&#xff0c;无人机飞控平台的智能化需求不断提升。紫光无人机AI飞控平台作为一款创新型产品&#xff0c;为用户提供了从飞行控制到任务管理的一站式解决方案&#xff0c;尤其在AI实时识别和事件分析方面具有显著优势。本文将介绍平台的核心功能、技术…...

UI自动化测试:异常截图和page_source

自动化测试过程中&#xff0c;是否遇到过脚本执行中途出错却不知道原因的情况&#xff1f;测试人员面临的不仅是问题的复现&#xff0c;还有对错误的快速定位和分析。而异常截图与页面源码&#xff08;Page Source&#xff09;的结合&#xff0c;正是解决这一难题的利器。 在实…...

47,【5】BUUCTF web lovesql

进入靶场 可知是单引号闭合&#xff0c;属于字符串型注入 则后续方法与字符串型无异 使用order by 判断出字节数为3 使用union select寻找注入点时切记第一个select为空 库名geek 表名group_concat(table_name) from information_schema.tables where table_schemageek# geek…...

网络安全——常用语及linux系统

一、网络安全概念及法规 网络安全&#xff1a;网络空间安全 cyber security 信息系统&#xff1a;由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度组成的已处理信息流为目的的人机一体化系统 信息系统安全三要素&#xff08;CIA&#xff09; 保密…...

json().get() 和 json[““] 的区别

以下是 json().get() 和 json[“”] 的区别&#xff1a; 使用方法和语法 json[“”]&#xff1a; 这是使用字典的索引操作符 [] 来访问 JSON 数据。假设 json 是一个字典&#xff0c;你可以通过 json[“key”] 的方式来获取对应 key 的值。 示例&#xff1a; python import js…...

深入解析CSS属性值计算:从声明到渲染的完整流程

目录 引言1. 确定声明值2. 层叠冲突3. 使用继承4. 使用默认值总结 引言 在网页开发中&#xff0c;理解CSS属性值的计算过程对于开发者来说至关重要。它不仅影响页面样式的最终呈现&#xff0c;还涉及到浏览器如何解析和应用样式规则。本文将深入探讨从无属性值到每个属性都有…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

window 显示驱动开发-如何查询视频处理功能(三)

​D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针&#xff0c;该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...

篇章一 论坛系统——前置知识

目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构​编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...