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

【React】静态组件动态组件

news 来源：原创 2025/6/17 3:14:08

静态组件

函数组件是静态组件：

组件第一次渲染完毕后，无法基于内部的某些操作让组件更新「无法实现自更新」；但是，如果调用它的父组件更新了，那么相关的子组件也一定会更新「可能传递最新的属性值进来」；
函数组件具备：属性…「其他状态等内容几乎没有」
优势：比类组件处理的机制简单，这样导致函数组件渲染速度更快。

第一次渲染组件，把函数执行

产生一个私有的上下文：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 实现类组件** 静态组件函数组件是静态组件： 组件第一次渲染完毕后，无法基于内部的某些操作让组件更新「无法实现自更新」；但是，如果调用它的父组…...

编程日记 2025/6/4 7:22:13

Spring Web MVC综合案例

承接上篇文章——Spring Web MVC探秘，在了解Spring Web MVC背后的工作机制之后，我们接下来通过三个实战项目，来进一步巩固一下前面的知识。一、计算器效果展示：访问路径：http://127.0.0.1:8080/calc.html 前端代码&a…...

编程日记 2025/5/31 0:52:53

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数，它基于已知的相机参数和相对位置&am…...

编程日记 2025/6/3 3:15:41

SDL2基本的绘制流程与步骤

SDL2（Simple DirectMedia Layer 2）是一个跨平台的多媒体库，它为游戏开发和图形应用提供了一个简单的接口，允许程序直接访问音频、键盘、鼠标、硬件加速的渲染等功能。在 SDL2 中，屏幕绘制的流程通常涉及到窗口的创建、渲染目标的设置、图像的绘制、事件的处理等几个步骤。…...

编程日记 2025/6/3 9:06:43

计算机网络（42）远程终端协议TELNET

前言 Telnet（Telecommunication Network Protocol）是一种网络协议，属于TCP/IP协议族，主要用于提供远程登录服务。一、概述 Telnet协议是一种远程终端协议，它允许用户通过终端仿真器连接到远程主机，并在远程…...

编程日记 2025/6/2 3:09:53

重拾Python学习，先从把python删除开始。。。

自己折腾就是不行啊，屡战屡败，最近终于找到前辈教我第一步删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder，跟matlab最像，也最容易入手。从VScode上搞python，最后安装到appdata上，安装插…...

编程日记 2025/5/27 10:18:03

51c大模型~合集106

我自己的原文哦~ https://blog.51cto.com/whaosoft/13115290 #GPT-5、 Opus 3.5为何迟迟不发新猜想：已诞生，被蒸馏成小模型来卖「从现在开始，基础模型可能在后台运行，让其他模型能够完成它们自己无法完成的壮举——就像一个老…...

编程日记 2025/6/4 15:15:23

node安装教程及环境配置

1.下载安装包下载的网址：Node.js — Download Node.js 根据自己电脑系统及位数选择，电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。 .msi和.zip格式区别： .msi…...

编程日记 2025/6/4 16:45:47

Temp123

MapDB：的持久化机制，以及源码分析和摘取 1、spark streaming--struct streaming 基于时间间隔攒批 2、kafka-connect-hdfs 控制 flush.size 和 interval.ms控制攒批 - 完全自研攒批机制 - 使用 embeded 版 https://lxblog.com/qianwen/share?shar…...

编程日记 2025/6/4 12:22:26

YOLO系列代码

Test-Time Augmentation TTA (Test Time Augmentation)是指在test过程中进行数据增强。其思想非常简单，就是在评测阶段，给每个输入进行多种数据增广变换，将一个输入变成多个输入，然后再merge起来一起输出，形成一种ens…...

编程日记 2025/6/2 21:32:41

2025.1.16——一、NewsCenter

题目来源：攻防世界 NewsCenter 目录一、题目二、sqlmap解题——bp抓包存为txt文件进行爆破 step 1：search框内随便输入，进行抓包 step 2：抓包后，存到txt文件，进行sqlmap step 3：-r获取文…...

编程日记 2025/6/4 8:18:30

Java中的继承

引入继承 Java中使用类对实体进行描述，类经过实例化之后的产物对象，就可以用来表示现实中的实体，描述的事物错综复杂，事物之间可能会存在一些关联，因此我们就需要将他们共性抽取，面向对象的思想中提出了继…...

编程日记 2025/6/1 19:49:58

vue3+ts+uniapp 微信小程序（第一篇）—— 微信小程序定位授权，位置信息权限授权

文章目录简介一、先看效果1.1 授权定位前，先弹出隐私协议弹框1.2 上述弹框点击同意，得到如下弹框1.3 点击三个点，然后点设置 1.4 在1.2步骤下，无论同意或者拒绝二、manifest.json 文件配置三、微信公众平台配置3.1 登录进入微信…...

编程日记 2025/6/4 9:49:02

1.新建项目安装库 npm init -y npm install -D playwright npm install -D playwright/test npm install typescript ts-node types/node npx playwright install 项目目录 2.编写代码 package.json {"name": "pom_playwright","version": …...

编程日记 2025/6/4 1:29:10

三台 Centos7.9 中 Docker 部署 Redis 哨兵模式

三台 Centos7.9 中 Docker 部署 Redis 哨兵模式 1. 环境规划2. 配置 Docker Compose3. 配置 Redis 密码和持久化4. 配置哨兵5. 启动服务6. 验证 Redis 哨兵模式7. 注意事项 1. 环境规划三台服务器的角色分配如下： IP Address容器端口角色192.168.15.128redis-mas…...

编程日记 2025/5/30 18:06:32

JSON数据格式的序列化和反序列化jackson针对首字母小学的字段返回序列化后第2个大写字母也变成小写的问题处理

SpringBoot类属性”第二个字母大写“反序列化问题。key第二个字母大写会被转成小写 , 这个为 jackson 的bug。后台 : String pName; public String getPName() { return pName; } 前台 : { pname : xxx } 解决方案： 使用JsonProperty("pName")…...

编程日记 2025/5/28 5:35:54

Android wifi列表中去自身的热点

Android wifi列表中去自身的热点一、前言 Android wifi列表中能搜索到自身的热点wifi？ 正常手机上都不会出现这个问题；可能是系统底层已经做了过滤处理。现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。比如基于两个单独的wifi双模组硬…...

编程日记 2025/6/2 4:33:02

Elasticsearch：Jira 连接器教程第二部分 - 6 个优化技巧

作者：来自 Elastic Gustavo Llermaly 将 Jira 连接到 Elasticsearch 后，我们现在将回顾最佳实践以升级此部署。在本系列的第一部分中，我们配置了 Jira 连接器并将对象索引到 Elasticsearch 中。在第二部分中，我们将回顾一些最佳实…...

编程日记 2025/5/31 18:06:06

单线性激光扫描、多线性激光扫描？激光扫描三维重建算法环节

分类都属于激光扫描技术，但它们在光源的数量和工作方式上存在一些差异。单线性激光扫描： 单线性激光扫描使用单个线状光源进行扫描。光源沿一个方向移动，将一条直线上的目标进行扫描。这种方式适用于需要获取目标表面在一个维度上的信息的…...

编程日记 2025/6/2 0:20:01

git 常用命令 git archive

git archive 是 Git 中用于创建一个包含指定提交或分支中所有文件的归档文件（如 .tar 或 .zip）的命令。这个命令非常适合用于分发项目快照、备份代码库或导出特定版本的文件。 git archive --formatzip --outputproject.zip HEAD …...

编程日记 2025/6/2 19:05:16

CMD批处理命令入门（6）——常用的特殊字符

CMD批处理命令入门（6）——特殊字符本章内容主要学习要点：重定向符 >、>>命令管道符 |组合命令 &、&&、||转义字符 ^变量引导符 %界定符 "" 本章内容主要学习要点： >、>>重定向符| 命令…...

编程日记 2025/5/31 8:32:02

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6）

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6） 前言本篇摘要11. Chatbot：融合大模型的多模态聊天机器人11.6 为LLM Agent构建UI11.5.1 使用代理构建1. 使用transformers.agents的实际示例2. 使…...

编程日记 2025/6/3 20:57:41

【算法】前缀和

前缀和 1.【模板】前缀和2.最大子段和3.【模板】二维前缀和4.激光炸弹前缀的核心思想是预处理，可以在暴力枚举的过程中，快速查询出某一段区间内的和，从而优化时间复杂度。是经典的用空间替换时间的做法。 1.【模板】前缀和【模板】前缀和…...

编程日记 2025/6/1 19:39:50

android Recyclerview viewholder统一封装

Recyclerview holder 统一封装 ViewHolder类 import android.annotation.SuppressLint import android.content.Context import android.graphics.Color import android.graphics.drawable.GradientDrawable import android.os.Build import android.os.CountDownTimer import…...

编程日记 2025/6/3 16:14:15

【Linux系统】Ext系列磁盘文件系统二：引入文件系统（续篇）

inode 和 block 的映射该博文中有详细解释：【Linux系统】inode 和 block 的映射原理目录与文件名这里有几个问题： 问题一： 我们访问文件，都是用的文件名，没用过 inode 号啊？ 之前总是说可以通过一个…...

编程日记 2025/5/30 4:47:22

为AI聊天工具添加一个知识系统之46 蒙板程序设计（第一版）：Facet六边形【意识形态：操纵】

本文要点要点 (原先标题冒号后只有 “Facet”后改为“Face六边形【意识形态】” ，是事后想到的，本文并未明确提出。备忘在这里作为后续的“后期制作”的备忘) 前面讨论的（“之41 纯粹的思维”）中说到，“意识”三…...

编程日记 2025/6/2 13:39:33

Vue.js组件开发-如何处理跨域请求

在Vue.js组件开发中，处理跨域请求（CORS，即跨来源资源共享）通常不是直接在Vue组件中解决的，而是需要后端服务器进行相应的配置，以允许来自不同源的请求。不过，前端开发者也需要了解一些基本的COR…...

编程日记 2025/5/31 17:09:37

unity学习19：unity里用C#脚本获取 gameobject 和 Componenet

目录 1 gameObject 和component 2 gameObject 与C#脚本 2.1 使用 this.gameObject 或gameObject（注意大小写） 2.2 获得其他信息 3 获取其他 GameObject的方法 3.1 获得自身挂载的GameObject 3.2 用find去查找其他的GameObject的名字或tag 3.3 …...

编程日记 2025/6/1 19:39:14

【React】插槽渲染机制

目录通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽在 React 中，并没有直接类似于 Vue 中的“插槽”机制（slot）。但是，React 可以通过 props和 children 来实现类似插槽的功能…...

编程日记 2025/6/1 8:28:38

【数据分享】1929-2024年全球站点的逐月平均气温数据（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据，气象指标包括气温、风速、降水、湿度等指标，其中又以气温指标最为常用！说到气温数据，最详细的气温数据是具体到气象监测站点的气温数据！本次我们为大家带来的就是具体到气象监…...

编程日记 2025/6/2 3:03:15

立创开发板入门第六课音频-扬声器和麦克风 I2S驱动

音频芯片介绍开发板上带有一个麦克风，一个扬声器，音频编解码芯片使用ES8311。麦克风直接连接到了ES8311芯片上，ES8311和扬声器之间，还有一个音频驱动放大器。ES8311通过I2S接口与ESP32-C3连接。 ES8311这个芯片不仅使用I2S接口…...

编程日记 2025/5/31 6:49:17

使用 Java 实现基于 DFA 算法的敏感词检测

使用 Java 实现基于 DFA 算法的敏感词检测 1. 引言敏感词检测在内容审核、信息过滤等领域有着广泛的应用。本文将介绍如何使用 DFA（Deterministic Finite Automaton，确定有限状态自动机） 算法，在 Java 中实现高效的敏感词检测。…...

编程日记 2025/6/1 10:40:59

springboot集成websocket实现实时大量数据，效率性能高

前言小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识，有兴趣的小伙伴可以关注一下！ 也许一个人独行，可以走的很快，但是一群人结伴而行，才能走的更远！让我们在成长的道路上互相学习&…...

编程日记 2025/5/31 12:59:32

如何在 Google Cloud Shell 中使用 Visual Studio Code (VS Code)？

Google Cloud Shell 是一个基于浏览器的命令行界面，它提供了一个临时的虚拟机环境，允许开发者在没有本地环境配置的情况下使用 Google Cloud 的各种服务。它还提供了一个免费的 5GB 存储空间以及可以在其中执行所有 Google Cloud 操作的命令行界面。 Vis…...

编程日记 2025/6/3 19:22:16

ChatGPT大模型极简应用开发-目录

引言要理解 ChatGPT，了解其背后的 Transformer 架构和 GPT 技术一路的演进则变得非常必要。 ChatGPT 背后的 LLM 技术使普通人能够通过自然语言完成过去只能由程序员通过编程语言实现的任务，这是一场巨大的变革。然而，人类通常容易高估技术…...

编程日记 2025/6/2 6:57:15

ZooKeeper 核心知识全解析：架构、角色、节点与应用

1.ZooKeeper 分布式锁怎么实现的 ZooKeeper 是一个高效的分布式协调服务，它提供了简单的原语集来构建更复杂的同步原语和协调数据结构。利用 ZooKeeper 实现分布式锁主要依赖于它的顺序节点（Sequential Node）特性以及临时节点（Ep…...

编程日记 2025/6/3 13:17:16

redis实现限流

令牌桶逻辑计算逻辑： 代码： import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool;/*** ClassName RedisRateLimiterTokenBucket* Description TODO* Author zhang zhengdong* DATE 2025/1/17 20:22* Version 1.0*/ public class…...

编程日记 2025/5/29 15:04:26

云服务器扫描出漏洞怎么办？

随着云计算技术的发展，越来越多的企业和个人选择使用云服务器来托管其应用和服务。然而，安全问题也随之而来。当云服务器的安全扫描显示存在漏洞时，如何正确应对成为了关键。本文将详细介绍发现漏洞后的处理步骤，并提供一些实用的…...

编程日记 2025/6/1 20:10:12

【影刀RPA_启动任务api】

影刀RPA_启动任务api #启动任务api import requests import json from time import sleepyingdao_Info{"accessKeyId":"XXX","accessKeySecret":"XXX","scheduleUuid":XXX,"robotUuid1":"XXX","r…...

编程日记 2025/6/3 0:10:34

Swift语言的多线程编程

Swift语言的多线程编程在现代软件开发中，多线程编程是提高应用性能和响应速度的重要手段。尤其是在 iOS 和 macOS 开发中，由于用户界面(UI)的交互性和复杂性，合理利用多线程可以极大地提升用户体验。本文将深入探讨 Swift 语言中的多线程编…...

编程日记 2025/6/1 18:52:28

js-判断一个object（对象）是否为空

1.Object.keys() 方法 const obj {};if (Object.keys(obj).length 0) {console.log(Object is empty); } else {console.log(Object is not empty); }Object.keys() 方法返回一个包含对象自身可枚举属性名称的数组。如果这个数组为空，那么对象就是空的。 2.JSO…...

编程日记 2025/6/4 17:48:15

AI在SEO中的关键词优化策略探讨

内容概要在当今数字化时代，人工智能（AI）正逐渐重塑搜索引擎优化（SEO）行业。AI技术的快速发展使得SEO策略发生了翻天覆地的变化，特别是在关键词优化方面。关键词优化的基本概念是通过选择与用户搜索意图密…...

编程日记 2025/6/2 6:08:23

无缝过渡：将 Ansys 子结构模型转换为 Nastran

了解如何将 Ansys 子结构模型无缝转换为 Nastran，以满足有效载荷动态模型要求 Ansys 子结构模型的优势 Ansys 子结构模型为从事大型装配体结构分析和仿真的工程师和分析师提供了多项优势。这些模型通过将复杂结构划分为更小、更易于管理的子结构，可以…...

编程日记 2025/6/4 12:06:54

单片机存储器和C程序编译过程

1、单片机存储器只读存储器不是并列关系，是从ROM发展到FLASH的过程 RAM ROM 随机存储器只读存储器 CPU直接存储和访问只读可访问不可写临时存数据，存的是CPU正在使用的数据永久存数据，存的是操作系统启动程序或指令断电易失 …...

编程日记 2025/5/30 13:49:33

Unity3D实现WEBGL打开Window文件对话框打开/上传文件

系列文章目录 unity工具文章目录系列文章目录👉前言👉一、效果展示👉一、unity设置👉1-1、创建Plugins文件夹👉1-2、搭建UI👉二、使用步骤👉2-1、打包webgl👉三、第二种插件实现打开文件对话框👉壁纸分享👉总结👉前言 Unity3D发布的WEBGL程序是不支持…...

编程日记 2025/6/3 12:09:50

探索 Transformer²：大语言模型自适应的新突破

目录一、来源： 论文链接：https://arxiv.org/pdf/2501.06252 代码链接：SakanaAI/self-adaptive-llms 论文发布时间：2025年1月14日二、论文概述： 图1 Transformer 概述图2 训练及推理方法概述图3 基于提示的…...

编程日记 2025/6/1 15:59:25

SDL2：arm64下编译使用 -- SDL2多媒体库使用音频实例

SDL2：Android-arm64端编译使用 2. SDL2：Android-arm64端编译使用2.1 安装和配置NDK2.2 下载编译SDL22.3 SDL2使用示例：Audio2.4 Android设备运行 2. SDL2：Android-arm64端编译使用在Linux系统上使用Android NDK编译和使用arm64下…...

编程日记 2025/6/4 0:08:50