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

React-Diffing算法和key的作用

article 2026/2/4 7:49:42

1.验证Diffing算法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="test"></div><script src="../js/17.0.1/react.development.js "></script><script src="../js/17.0.1/react-dom.development.js"></script><script src="../js/17.0.1/babel.min.js"></script><!-- 对标签属性进行限制 --><script src="../js/17.0.1/prop-types.js"></script><script type="text/babel">class Time extends React.Component {state = { date: new Date() }componentDidMount() {setInterval(() => {this.setState({ date: new Date() })}, 1000)}render() {return (<div>现在时间是{this.state.date.toTimeString()}<input type="text" /></div>)}}ReactDOM.render(<Time />, document.getElementById('test'))</script>
</body></html>

在这里插入图片描述
这段代码是一个使用 React 编写的时钟组件，它会每秒更新一次当前时间并显示在页面上,输入框的数据始终没变,是因为Diffing算法

diffing 算法通过比较虚拟 DOM 树的差异，只更新实际 DOM 中发生变化的部分

2.key的作用

在这里插入图片描述

若使用index作为key值:请看代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="test"></div><script src="../js/17.0.1/react.development.js "></script><script src="../js/17.0.1/react-dom.development.js"></script><script src="../js/17.0.1/babel.min.js"></script><!-- 对标签属性进行限制 --><script src="../js/17.0.1/prop-types.js"></script><script type="text/babel">class Person extends React.Component {state = {persons: [{ id: 1, name: "小李", age: 18 },{ id: 2, name: "小张", age: 19 }]}add = () => {const { persons } = this.stateconst p = { id: persons.length, name: '小王', age: 20 }this.setState({ persons: [p, ...persons] })}render() {return (<div>{this.state.persons.map((item, index) => <li key={index}>{item.name}, {item.age}</li>)}<button onClick={this.add}>添加小王</button></div>)}}ReactDOM.render(<Person />, document.getElementById('test'))</script>
</body></html>

在这里插入图片描述

React-Diffing算法和key的作用

1.验证Diffing算法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </he…...

编程日记 2026/1/20 7:01:15

【NLP 54、大模型训练相关知识】

目录引言：大模型训练两大问题一、并行训练 1.方式一：数据并行 DP ① 复制模型到多个GPU ② 各自计算梯度后累加，再反传更新 ③ 需要单卡就能训练整个模型（显存够大） 2.方式二：模型并行 PP ① 将模型的不同…...

编程日记 2026/1/28 3:49:16

cursor机器码重置

1、下载vscode插件 cursor-fake-machine-0.0.2 2、将插件拖入拓展 3、彻底将cursor账号退出 setting -> Manage -> 退出账号 4、打开cursor，ctrlshiftp ，输入fake,点击确定...

编程日记 2026/1/31 4:24:29

IPSG 功能协议

IPSG（IP Source Guard）即 IP 源保护，是一种基于 IP 地址和 MAC 地址绑定的安全功能，用于防止 IP 地址欺骗和非法的 IP 地址访问。以下是配置 IPSG 功能的一般步骤： 基于端口的 IPSG 配置进入接口配置模式&#xff1…...

编程日记 2026/1/15 5:52:53

es-字段类型详解

字段类型用途示例Text全文搜索的字符串字段。json { "type": "text" }Keyword精确匹配的字符串字段。json { "type": "keyword" }Numeric数值字段（如 integer、long、float 等）。json { "type": &quo…...

编程日记 2025/12/31 9:11:27

音视频开发从入门到精通：编解码、流媒体协议与FFmpeg实战指南

音视频开发从入门到精通：编解码、流媒体协议与FFmpeg实战指南音视频技术作为数字媒体领域的核心，正在成为互联网和移动应用的重要组成部分。本文将全面介绍音视频开发的学习路径，从基础概念到高级应用，从编解码原理到实战案例&a…...

编程日记 2025/6/10 4:20:46

《P1072 [NOIP 2009 提高组] Hankson 的趣味题》

题目描述 Hanks 博士是 BT（Bio-Tech，生物技术) 领域的知名专家，他的儿子名叫 Hankson。现在，刚刚放学回家的 Hankson 正在思考一个有趣的问题。今天在课堂上，老师讲解了如何求两个正整数 c1 和 c2 的最大公约数…...

编程日记 2025/6/17 10:58:07

CSS3学习教程，从入门到精通，化妆品网站 HTML5 + CSS3 完整项目（26）

化妆品网站 HTML5 CSS3 完整项目下面是一个完整的化妆品网站项目，包含主页、登录页面和注册页面。我将按照您的要求提供详细的代码和注释。 1. 网站规划与需求分析需求分析展示化妆品产品信息提供用户注册和登录功能响应式设计，适配不同设备美观…...

编程日记 2025/12/8 10:43:49

全国产FMC子卡-16bit 8通道2.4G

国产化FMC DA子卡，16bit 8通道2.4GS/s 全国产FMC子卡是一款高分辨率、高采样率的全国产多通道标准双宽DAC FMC子板。其接口电气和结构设计均依据FMC标准(ANSI/VITA 57.1)，通过两个高密度FMC连接器（HPC）连接至FPGA载板。它提供8路A…...

编程日记 2026/2/3 6:57:15

fpga：分秒计时器

任务目标分秒计数器核心功能：实现从00:00到59:59的循环计数，通过四个七段数码管显示分钟和秒。复位功能：支持硬件复位，将计数器归零并显示00:00。启动/暂停控制：通过按键控制计时的启动和暂停。消抖处理&#…...

编程日记 2026/1/31 12:42:04

小白 thingsboard 拆分前后端分离

1、modules 里注释掉ui_ugx <modules><module>netty-mqtt</module><module>common</module><module>rule-engine</module><module>dao</module><module>edqs</module><module>transport</module&g…...

编程日记 2026/2/2 17:25:39

4G专网：企业数字化转型的关键通信基石

4G专网在数字化转型的浪潮下，企业对高可靠性、低时延、安全可控的通信网络需求日益增长。传统的公用蜂窝网络难以满足企业在工业自动化、能源管理、智慧城市等领域的特殊需求，因此4G专网成为众多行业的优先选择。作为行业领先的移动核心网提供商&#x…...

编程日记 2026/1/26 12:27:07

golang 的encoding/json包

理解 Go 语言中的 encoding/json 包 Go 语言通过 encoding/json 包提供了对 JSON 数据的强大支持，包括序列化、反序列化、自定义处理、数组处理、任意结构解析以及流式处理等。 1. 基本使用 1.1 结构体字段与 JSON 的映射在 Go 中，结构体的字段可以…...

编程日记 2026/1/31 13:57:27

基于FLask的共享单车需求数据可视化分析系统

【FLask】基于FLask的共享单车需求数据可视化分析系统 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统能够整合并处理大量共享单车使用数据，通过直观的可视化手段&#xff0…...

编程日记 2026/1/30 7:22:21

STL 性能优化实战：解决项目中标准模板库的性能瓶颈

🧑 博主简介：CSDN博客专家、全栈领域优质创作者、高级开发工程师、高级信息系统项目管理师、系统架构师，数学与应用数学专业，10年以上多种混合语言开发经验，从事DICOM医学影像开发领域多年，熟悉DICOM协议及…...

编程日记 2026/1/27 14:05:36

ES使用聚合aggregations实战（自用：2025.04.03更新）

ES使用聚合aggregations实战聚合模板桶聚合：Bucket Aggregations指标聚合：Metrics Aggregations管道聚合：Pipeline Aggregations嵌套聚合日期直方图：date-histogram 接口实战接口一：根据stu_id分组统计时间段内的各个…...

编程日记 2026/1/31 9:51:01

AI Agent设计模式四：Evaluator

概念 ：质量验证与反馈机制 ✅ 优点：自动化质量检查，实现持续优化闭环❌ 缺点：评估准确性依赖模型能力 from typing import TypedDict from langchain_openai import ChatOpenAI from langgraph.graph import StateGraph, START, …...

编程日记 2026/1/27 10:47:15

AI绘画中的LoRa是什么？

Lora是一个多义词，根据不同的上下文可以指代多种事物。以下将详细介绍几种主要的含义： LoRa技术 LoRa（Long Range Radio）是一种低功耗广域网（LPWAN）无线通信技术，以其远距离、低功耗和低成本的特…...

编程日记 2026/1/27 2:10:32

Linux网络：数据链路层以太网

目录认识数据链路层关于以太网1. 基本概念2. 以太网帧格式3. MAC vs IP 认识数据链路层数据链路层位于物理层和网络层之间，其作用是将源自物理层来的数据可靠地传输到相邻节点的目标主机的网络层，主要通过物理介质(如以太网，Wi-Fi等)将数…...

编程日记 2026/1/26 19:37:01

Redisson使用详解

一、Redisson 核心特性与适用场景 Redisson 是基于 Redis 的 Java 客户端，提供分布式对象、锁、集合和服务，简化分布式系统开发。典型应用场景： 分布式锁：防止重复扣款、超卖控制（如秒杀库存）。数据共享…...

编程日记 2026/1/8 9:10:57

MySQL基础 [一] - 数据库基础

目录什么是数据库站在服务器角度理解站在用户角度理解为什么不直接使用文件存储呢？ 主流数据库 MySQL的基本使用数据库的使用样例服务器管理服务器数据库表之间的关系 MySQL的架构 MySQL语句分类存储引擎查看存储引擎存储引擎对比什么…...

编程日记 2026/1/26 17:40:29

【华为OD技术面试真题 - 技术面】- Java面试题（17)

华为OD面试真题精选专栏：华为OD面试真题精选目录: 2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选虚拟机分区1. **虚拟磁盘分区**2. **虚拟机的内存分区**3. **CPU分配**4. **虚拟网络分区**5. **存储虚拟化和分区**6. **虚拟机分区管理**…...

编程日记 2026/1/26 21:43:26

#Linux内存管理# 在32bit Linux中，内核空间的线性映射的虚拟地址和物理地址是如何换算的？

在32位Linux系统中，内核空间的线性映射（也称为直接映射或低端内存映射）采用固定的偏移量进行虚拟地址和物理地址的换算。以下是详细的转换规则及背景知识： 1. 32位Linux内存布局用户空间：虚拟地址 0x00000000 到 0x…...

编程日记 2026/1/26 17:44:37

006贪心——算法备赛

跨步问题跳跃游戏|| 问题描述给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示从索引 i 向后跳转的最大长度。换句话说，如果你在 nums[i] 处，你可以跳转到任意 nums[i j] 处: 0 < j < nums[i]i j &…...

编程日记 2026/1/26 12:12:32

对 Python Websockets 库全方位详解

一、WebSocket 简介 WebSocket 是一种基于 TCP 的协议，支持全双工通信（服务器和客户端可以同时发送消息），适用于实时性要求高的场景（如聊天、实时数据监控、在线游戏等）。与 HTTP 不同，WebSock…...

编程日记 2025/11/19 4:39:41

pytorch中Dropout

Dropout 是一种常用的正则化技术，用于防止神经网络过拟合。PyTorch 提供了 nn.Dropout 层来实现这一功能。基本用法 torch.nn.Dropout(p0.5, inplaceFalse) 参数说明： p (float): 每个元素被置为0的概率（默认0.5） inplace (b…...

编程日记 2026/1/31 17:01:25

【玩泰山派】2、制作buildroot镜像，并烧录

文章目录前言制作buildroot镜像过程搭建环境（docker版）下载泰山派开发的sdk利用制作的镜像和下载的sdk去启动开发docker容器编译buildroot镜像参考前言泰山派官方提供了不少现成的镜像但是都买了泰山派了，肯定是想自己编译折腾下&…...

编程日记 2026/1/29 5:54:06

初阶数据结构--树

1. 树的概念与结构树是⼀种⾮线性的数据结构，它是由 n（n>0） 个有限结点组成⼀个具有层次关系的集合。把它叫做树是因为它看起来像⼀棵倒挂的树，也就是说它是根朝上，⽽叶朝下的。有⼀个特殊的结点，称…...

编程日记 2026/2/3 7:54:17

client-go如何监听自定义资源

如何使用 client-go 监听自定义资源在 Kubernetes 中使用 client-go 监听自定义资源（Custom Resource，简称 CR）需要借助 Dynamic Client 或 Custom Informer，因为 client-go 的标准 Clientset 只支持内置资源（如 Pod…...

编程日记 2026/2/4 5:16:44

安装gpu版本的dgl

1.先去网址，找到对应版本的dgl,然后下载到本地。 dgl-whl下载地址我的是python 3.8 ，cuda 11.6. windows 2.在虚拟环境里输入 pip install E:\dgl-1.0.2cu116-cp38-cp38-win_amd64.whl （因为我下载到E盘里了） 这样GPU版本的d…...

编程日记 2026/1/29 4:34:42

1.验证Diffing算法

2.key的作用

相关文章：