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

React组件开发流程-03.1

news 来源：原创 2025/7/22 20:37:29

此章先以一个完整的例子来全面了解下React组件开发的流程，主要是以代码为主，在不同的章节中会把重点标出来，要完成的例子如下，也可从官网中找到。
在这里插入图片描述

React组件开发流程

这只是一个通用流程，在熟悉后不需要完全遵从。

将 UI 拆解为组件层级结构
使用 React 构建一个静态版本
找出 UI 精简且完整的 state 表示
验证 state 应该被放置在哪里
添加反向数据流

组件开发流程示例

将 UI 拆解为组件层级结构

在这里插入图片描述

FilterableProductTable（灰色）包含完整的应用，最外层元素
- SearchBar（蓝色）搜索输入框和复选按钮，获取用户输入。
- ProductTable（淡紫色）产品列表，根据用户输入，展示和过滤清单。
  - ProductCategoryRow（绿色）展示每个类别的表头。
  - ProductRow（黄色）展示每个产品的行。

拆分后构建一种上述的树状结构。

使用 React 构建一个静态版本

在简单的例子中，自上而下构建通常更简单；而在大型项目中，自下而上构建更简单。这里使用自下向上方式构建

ProductCategoryRow

category参数为字符串，如Fruits或Vegetables，从下面的数据中取

{category: “Vegetables”, price: “$1”, stocked: true, name: “Peas”}

function ProductCategoryRow({ category }) {return (<tr><th colSpan="2">{category}</th></tr>);
}

ProductRow

product参数为是一完整数据，如下面数据

{category: “Vegetables”, price: “$1”, stocked: true, name: “Peas”}

function ProductRow({ product }) {const name = product.stocked ? product.name :<span style={{ color: 'red' }}>{product.name}</span>;return (<tr><td>{name}</td><td>{product.price}</td></tr>);
}

ProductTable

products参数为产品数据组，最后返回一个完整的table表格

function ProductTable({ products }) {const rows = []; //包含多个ProductCategoryRow组件和ProductRow组件，共同组成一个单独的表格let lastCategory = null;products.forEach((product) => {if (product.category !== lastCategory) {rows.push(<ProductCategoryRowcategory={product.category}key={product.category} />);}rows.push(<ProductRowproduct={product}key={product.name} />);lastCategory = product.category;});return (<table><thead><tr><th>Name</th><th>Price</th></tr></thead><tbody>{rows}</tbody></table>);
}

SearchBar

无参数，包含一个输入框和一个复选框

function SearchBar() {return (<form><input type="text" placeholder="Search..." /><label><input type="checkbox" />{' '}Only show products in stock</label></form>);
}

FilterableProductTable

products参数为产品数据组

function FilterableProductTable({ products }) {return (<div><SearchBar /><ProductTable products={products} /></div>);
}

发布组件

最顶层组件（FilterableProductTable）将接收数据模型作为其 prop。这被称之为 单向数据流。

const PRODUCTS = [{category: "Fruits", price: "$1", stocked: true, name: "Apple"},{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
];export default function App() {return <FilterableProductTable products={PRODUCTS} />;
}

找出 UI 精简且完整的 state 表示

有一个规律可以了解下：

随着时间推移保持不变？如此，便不是 state。
通过 props 从父组件传递？如此，便不是 state。
是否可以基于已存在于组件中的 state 或者 props 进行计算？如此，它肯定不是state！

剩下的可能是 state。所以
让我们再次一条条验证它们:

原始列表中的产品被作为 props 传递，所以不是 state。
搜索文本似乎应该是 state，因为它会随着时间的推移而变化，并且无法从任何东西中计算出来。
复选框的值似乎是 state，因为它会随着时间的推移而变化，并且无法从任何东西中计算出来。
过滤后列表中的产品不是 state，因为可以通过被原始列表中的产品，根据搜索框文本和复选框的值进行计算。

props 像是你传递的参数至函数。它们使父组件可以传递数据给子组件，定制它们的展示。举个例子，Form 可以传递 color prop 至 Button。
state 像是组件的内存。它使组件可以对一些信息保持追踪，并根据交互来改变。举个例子，Button 可以保持对 isHovered state 的追踪。

验证 state 应该被放置在哪里

验证哪个组件是通过改变 state 实现可响应的，或者拥有这个 state。

记住：React 使用单向数据流，通过组件层级结构从父组件传递数据至子组件。要搞清楚哪个组件拥有哪个 state。

验证使用 state 的组件：

ProductTable 需要基于 state (搜索文本和复选框值) 过滤产品列表。
SearchBar 需要展示 state (搜索文本和复选框值)。
寻找它们的父组件：它们的第一个共同父组件为 FilterableProductTable。

决定 state 放置的地方：我们将过滤文本和勾选 state 的值放置于 FilterableProductTable 中。所以 state 将被放置在 FilterableProductTable。

import { useState } from 'react';function FilterableProductTable({ products }) {const [filterText, setFilterText] = useState('');const [inStockOnly, setInStockOnly] = useState(false);return (<div><SearchBarfilterText={filterText}inStockOnly={inStockOnly} /><ProductTableproducts={products}filterText={filterText}inStockOnly={inStockOnly} /></div>);
}

然后，filterText 和 inStockOnly 作为 props 传递至 ProductTable 和 SearchBar。

添加反向数据流

简单来讲就是添加事件，当用户更改表单输入时，state 将更新以反映这些更改。state 由 FilterableProductTable 所拥有，所以只有它可以调用 setFilterText 和 setInStockOnly。

function SearchBar({filterText,inStockOnly,onFilterTextChange,onInStockOnlyChange
}) {return (<form><inputtype="text"value={filterText}placeholder="搜索"onChange={(e) => onFilterTextChange(e.target.value)}/><label><inputtype="checkbox"checked={inStockOnly}onChange={(e) => onInStockOnlyChange(e.target.checked)}

完整代码如下

这里的事件反向流是用于操作state的，这东西又是私有的，所以需要一个事件函数传递的过程，即

自定义组件FilterableProductTable定义了一个filterText变量；
在FilterableProductTable中包含子组件SearchBar，子组件中有这个输入框，所以需要把filterText的设置函数传递进去；
SearchBar 组件需要定义一个参数接收state方法，这个方法供原生的onChange触发

import { useState } from 'react';function FilterableProductTable({ products }) {const [filterText, setFilterText] = useState('');const [inStockOnly, setInStockOnly] = useState(false);return (<div><SearchBarfilterText={filterText}inStockOnly={inStockOnly}onFilterTextChange={setFilterText}onInStockOnlyChange={setInStockOnly} /><ProductTableproducts={products}filterText={filterText}inStockOnly={inStockOnly} /></div>);
}function ProductCategoryRow({ category }) {return (<tr><th colSpan="2">{category}</th></tr>);
}function ProductRow({ product }) {const name = product.stocked ? product.name :<span style={{ color: 'red' }}>{product.name}</span>;return (<tr><td>{name}</td><td>{product.price}</td></tr>);
}function ProductTable({ products, filterText, inStockOnly }) {const rows = [];let lastCategory = null;products.forEach((product) => {if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) {return;}if (inStockOnly && !product.stocked) {return;}if (product.category !== lastCategory) {rows.push(<ProductCategoryRowcategory={product.category}key={product.category} />);}rows.push(<ProductRowproduct={product}key={product.name} />);lastCategory = product.category;});return (<table><thead><tr><th>Name</th><th>Price</th></tr></thead><tbody>{rows}</tbody></table>);
}function SearchBar({filterText,inStockOnly,onFilterTextChange,onInStockOnlyChange}) {return (<form><inputtype="text"value={filterText} placeholder="Search..."onChange={(e) => onFilterTextChange(e.target.value)} /><label><inputtype="checkbox"checked={inStockOnly}onChange={(e) => onInStockOnlyChange(e.target.checked)} />{' '}Only show products in stock</label></form>);
}const PRODUCTS = [{category: "Fruits", price: "$1", stocked: true, name: "Apple"},{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
];export default function App() {return <FilterableProductTable products={PRODUCTS} />;
}

React组件开发流程-03.1

此章先以一个完整的例子来全面了解下React组件开发的流程，主要是以代码为主，在不同的章节中会把重点标出来，要完成的例子如下，也可从官网中找到。 React组件开发流程这只是一个通用流程，在熟悉后不需要完全遵从。 …...

编程日记 2025/7/22 20:37:29

Vue 中 v-model 的三种使用方式对比与实践

在 Vue 3 中，v-model 是组件双向数据绑定的核心特性。随着 Vue 的版本演进，v-model 的使用方式也在不断优化。本文将基于您提供的代码示例，详细分析三种不同的 v-model 实现方式：基础用法、useVModel Hook（vueuse/core…...

编程日记 2025/7/23 8:33:28

Adminer：一个基于Web的轻量级数据库管理工具

Adminer 是一个由单个 PHP 文件实现的免费数据库管理工具，支持 MySQL、MariaDB、PostgreSQL、CockroachDB、SQLite、SQL Server、Oracle、Elasticsearch、SimpleDB、MongoDB、Firebird、Clickhouse 等数据库。 Adminer 支持的主要功能如下： 连接数据库服…...

编程日记 2025/7/22 13:19:31

Linux笔记---内核态与用户态

用户态（User Mode） 权限级别：较低，限制应用程序直接访问硬件或关键系统资源。适用场景：普通应用程序的运行环境。限制：无法执行特权指令（如操作I/O端口、修改内存管理单元配置等&#xff09…...

编程日记 2025/7/23 8:34:46

MFC 编程中 OnInitDialog 函数

核心作用对话框初始化入口 ：创建完成后第一个执行的函数。是对话框的起点。控件操作安全期 ：此时所有控件已创建完成。可以安全地进行控件的初始化、属性设置等操作。界面布局最佳时机 ：窗口显示前完成初始化设置。可以进行布局调整、数据初…...

编程日记 2025/7/23 1:24:37

Java高频面试之并发编程-18

hello啊，各位观众姥爷们！！！本baby今天又来报道了！哈哈哈哈哈嗝🐶 面试官：详细说说synchronized synchronized 是 Java 中实现线程同步的核心关键字，用于解决多线程环境下的资源竞争…...

编程日记 2025/7/22 22:51:07

深入探究AKS Workload Identity

Azure Kubernetes 服务 (AKS) 提供了一项名为 Workload Identity 的强大功能，它可以增强安全性并简化在 Kubernetes 集群中运行的应用程序的身份验证。以下是 Workload Identity 在 AKS 环境中的工作原理概述： AKS 中的 Workload Identity 允许 Pod 无需…...

编程日记 2025/7/10 12:08:48

【MySQL基础】MySQL基础：MySQL基本操作与架构

MySQL学习： https://blog.csdn.net/2301_80220607/category_12971838.html?spm1001.2014.3001.5482 前言： 这里是MySQL学习的第一篇，本篇主要是讲解一些MySQL的基础操作，但这并不是重点，本篇我们主要是要理解MySQL…...

编程日记 2025/7/16 14:46:40

【线下沙龙】NineData x Apache Doris x 阿里云联合举办数据库技术Meetup，5月24日深圳见！

5月24日下午，NineData 将联合 Apache Doris、阿里云一起，在深圳举办数据库技术Meetup。本次技术沙龙聚焦「数据实时分析」与「数据同步迁移」两大核心领域，针对企业数据战略中的痛点，特邀行业资深技术大咖，结合多年技…...

编程日记 2025/7/22 9:51:36

【Unity网络编程知识】Unity的 UnityWebRequest相关类学习

1、UnityWebRequest类介绍 UnityWebRequest是一个unity提供的一个模块化的系统类，用于构成HTTP请求和处理HTTP响应，它主要目标是让unity游戏和Web服务端进行交互，它将之前WWW的相关功能都集成在了其中，所以新版本中都建议使用unit…...

编程日记 2025/7/22 20:44:55

STM32实战指南——DHT11温湿度传感器驱动开发与避坑指南

知识点1【DHT11的概述】 1、概述 DHT是一款温湿度一体化的数字传感器（无需AD转换）。 2、驱动方式通过单片机等微处理器简单的电路连接就能实时采集本地湿度和温度。DHT11与单片机之间采用单总线进行通信，仅需要一个IO口。相对于单片机…...

编程日记 2025/7/20 1:34:54

SVG 与 Canvas 技术调研对比

在画布中进行大量矩形框绘制时，SVG 和 Canvas 都是可行的技术方案，但它们适用于不同的场景，技术特性也有明显区别。下面我从性能、灵活性、可维护性、适用场景等方面做一个系统性的对比，帮助你做出更合适的选择。 &#x1f9e…...

编程日记 2025/7/12 22:16:25

Ubuntu 远程桌面配置指南

概述：本文主要介绍在Ubuntu 22.04中通过VNC实现远程连接的方法。首先需安装图形化界面和VNC工具x11vnc，设置开机启动服务；然后在Windows客户端用VNC Viewer通过局域网IP和端口5900连接。总结：一、VNC配置与安装安装图形化界面在Ubuntu 22.04中需先安装： sudo apt …...

编程日记 2025/7/18 18:58:23

146. LRU 缓存

一、题目二、思路题目要求 O(1) 的平均时间复杂度运行 -> 使用Map空间换时间 Map<Integer, Node>Map 通过 key 直接找到对应节点 getNode(key) -> Node记得只要查过该节点之后就应该把该节点放到最前面 pushFront(Node)put 元素后，在map中添加&…...

编程日记 2025/7/21 8:35:34

微信学习之导航功能

先看这个功能的效果： 然后开始学习吧。一、我们这里用的是vant的Grid控件，首先我们导入： { "usingComponents": {"van-search": "vant/weapp/search/index","my-swiper":"../../components…...

编程日记 2025/7/17 9:24:52

MySQL替换瀚高数据库报错： TO_DAYS（）不存在（APP）

文章目录环境症状问题原因解决方案报错编码环境系统平台：中标麒麟（海光）7,中标麒麟（飞腾）7 版本：4.5 症状 MySQL替换为瀚高数据库进行应用系统适配报错：TO_DAYS（）不…...

编程日记 2025/7/18 12:17:55

FPGA：高速接口JESD204B以及FPGA实现

本文将先介绍JESD204B高速接口的基本概念和特性，然后详细说明如何基于Xilinx Kintex-7系列FPGA实现JESD204B高速接口。一、JESD204B高速接口介绍 JESD204B是由JEDEC（固态技术协会）制定的一种高速串行通信标准，主要用于数据转换器…...

编程日记 2025/7/18 7:47:14

HarmonyOS Navigation组件深度解析与应用实践

HarmonyOS Navigation组件深度解析与应用实践一、组件架构与核心能力 HarmonyOS Navigation组件作为路由导航的根视图容器，采用三层架构设计： 标题层：支持主副标题配置，提供Mini/Free/Full三种显示模式内容层：默认…...

编程日记 2025/7/22 23:13:43

C#中的ThreadStart委托

ThreadStart 委托： ThreadStart 是 .NET 中的一个内置委托类型，表示无参数且无返回值的方法。其定义如下： public delegate void ThreadStart(); 通常用于定义线程的入口方法。 List<ThreadStart>： 这是一个泛型集合&…...

编程日记 2025/7/23 1:22:05

knife4j官网：https://doc.xiaominfo.com/docs/quick-start 1. 引入Knife4j相关依赖  <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version…...

编程日记 2025/7/21 3:38:14

基于Java在高德地图面查询检索中使用WGS84坐标的一种方法-以某商场的POI数据检索为例

前言随着移动互联网的飞速发展，基于位置的服务（LBS）需求日益增长，越来越多的应用需要从地图中检索特定区域内的地理信息，例如商业场所、公共服务设施等。商场作为城市商业活动的重要载体，其周边的地理信息…...

编程日记 2025/7/19 11:38:59

6K型护套连接器DLJ0601(2000)-00

6K型护套连接器DLJ0601(2000)-00简介 6K型护套连接器DLJ0601(2000)-00是一种用于电气连接的组件，广泛应用于工业设备、通信系统和电子设备中。该连接器设计紧凑，具有高可靠性和耐用性，适用于多种环境条件下的电气连接需求。主要特点高可…...

编程日记 2025/7/20 21:09:54

Hexo的Next主题的Config文件内方便修改的参数（Chat-Gpt）

这是对 Hexo 的 Next 主题 _config.yml 文件各部分配置项的中文解释，帮助你更方便地进行定制： 🚀 核心设置 cache / minify cache.enable: 启用缓存，加快生成速度。minify: 是否压缩生成的 HTML/CSS/JS。 custom_file_path 自…...

编程日记 2025/7/22 17:15:46

【three】给立方体的每个面加载不同贴图

效果图： 主要代码： initCube() {let _this thisconst geometry new Three.BoxGeometry(1, .3, .5)let TextureLoader new Three.TextureLoader()let mater1TextureLoader.load(require(/assets/images/bg2.jpg),function (texture){console.log(tex…...

编程日记 2025/7/19 10:35:45

vscode怎么关闭自动定位文件

关闭自动定位文件功能方式1 在设置中搜索: explorer.autoReveal 方式2 直接在settings.json中增加"explorer.autoReveal": false 添加类似jetbrains IDE的文件定位功能可以直接安装插件市场搜索niushuaibing.vs-location, 安装后会有文件定位按钮, 点击后即可…...

编程日记 2025/7/21 10:11:44

2025-5-19Vue3快速上手

1、toRefs和toRef 当解构一个响应式对象（如 reactive 创建的对象）时，直接解构会失去响应性，此时可用 toRefs或toRef 保持响应性 toRef 的核心作用是将对象的属性转换为 ref，保持与原属性的双向绑定，无论原…...

编程日记 2025/7/17 10:49:06

HDMI 屏幕电脑HDMI HDMI采集卡的关系

一、HDMI接口方向性原理普通设备的HDMI接口方向： 电脑的HDMI接口：无论是显卡还是主板上的HDMI，均为输出端（信号源），只能向外发送视频信号，无法接收输入信号。显示器的HDMI接口：均…...

编程日记 2025/7/17 16:11:11

JESD204 ip核使用与例程分析（二）

JESD204 ip核使用与例程分析（二） JESD204时钟方案专用差分时钟对例程分析jesd204_0_transport_layer_demapperjesd204_0_sig_chkjesd204_0_clockingjesd204_0 ip核port寄存器AXI-LITE寄存器配置jesd204_phy ip核JESD204时钟方案图3-1所示为最通用、灵活的时钟解决方案。在图…...

编程日记 2025/7/16 23:09:48

如何使用VCS+XA加密verilog和spice网表

如果要交付verilog，但是需要对方进行VCS仿真，那么可以用以下方法： 一、基于编译指令的局部加密适用场景：需精确控制加密范围（如仅加密核心算法或敏感逻辑）。实现步骤： 代码标注…...

编程日记 2025/7/22 14:44:54

Grafana之Dashboard（仪表盘）

在前面的小节中介绍了Grafana中4中常用的可视化面板的使用，通过在面板中使用PromQL表达式，Grafana能够方便的将Prometheus返回的数据进行可视化展示。例如，在展示主机CPU使用率时，我们使用了如下表达式： 1 - (avg(ira…...

编程日记 2025/7/20 19:25:04

AOSP 中常见的键值对存储方式全解析（适用于系统开发与应用开发）

在 Android 系统开发（AOSP）中，键值对（Key-Value）存储是一种基础且广泛使用的数据持久化方式。从系统属性、用户设置，到应用配置，都依赖于这种结构的存储方式。本文将全面梳理 AOSP 中主流的键值…...

编程日记 2025/7/17 13:16:03

集合进阶2

Java不可变集合、Stream流与方法引用深度解析一、不可变集合（Immutable Collections）进阶指南 1.1 不可变集合核心特性防御性编程：防止外部修改数据（如传递集合给第三方库时）线程安全：天然支持多线程读…...

编程日记 2025/7/14 18:01:26

eMMC深度解析：嵌入式多媒体卡的硬件电路设计要点

一、eMMC 技术深度解析 1.定义与背景 eMMC（Embedded Multi Media Card）是一种专为嵌入式系统设计的非易失性存储解决方案，它将 NAND 闪存、主控芯片和接口协议封装在一个 BGA（Ball Grid Array）封装中。其核心目标是简…...

编程日记 2025/7/23 6:26:57

【SPIN】PROMELA语言编程入门同步机制（SPIN学习系列--4）

同步机制 PROMELA 不包含信号量、锁或监控器等常见的同步原语，而是通过语句的**可执行性（executability）**概念来建模同步机制。计算机系统的架构限制了同步机制的设计：本章主要介绍适用于共享内存系统的同步机制，第7…...

编程日记 2025/7/23 7:01:26

整数的个数

【描述】给定k（1< k < 100）个正整数，其中每个数都是大于等于1，小于等于10的数。写程序计算给定的k个正整数中，1，5和10出现的次数。【输入】输入有两行：第一行包含一个正整数k&#xff…...

编程日记 2025/7/16 18:17:48

AWS EKS IP 耗尽：原因、解决方案和最佳实践

想象一下，您的 AWS EKS 集群在生产环境中运行顺畅，所有 CI/CD 管道运行正常，服务优雅地扩展，一切都像自动驾驶模式一样。——直到有一天，新的 Pod 无法启动。您深入研究 kubectl get pods 命令，发现一堆 P…...

编程日记 2025/7/16 16:49:35

艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关通讯案例

艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关通讯案例在现代工业自动化控制系统中，艾默生流量计因其高精度、稳定性和易用性而备受青睐。然而，为了实现与不同协议设备之间的无缝通信，经常需要借助专业的通讯网关进行协议转换。本文将…...

编程日记 2025/7/17 1:23:29

Python测试单例模式

单例模式的核心思想单例模式确保一个类只有一个实例，并提供一个全局访问点。这在需要控制资源访问（如配置文件、数据库连接等）时非常有用。一个简单的示例： import threading import timeclass Singleton:instance Nonelock…...

编程日记 2025/7/15 10:01:08

Linux架构篇、第五章_06Jenkins 触发器全面解析与实战指南

Linux架构篇欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：jenkins触发器的介绍与使用版本号: 1.0,0 作者: laowang 日期: 2025.05.16 适用环境:rocky9.5 文档说明本文档为《jenkins 触发器的介绍与…...

编程日记 2025/7/23 4:01:04

如何快速更换电脑浏览器ip：教程与注意事项

无论是为了访问地域限制内容、保护隐私，还是解决网络问题，快速更换浏览器IP地址的需求日益增多。以下是快速更换电脑浏览器IP地址的几种常用方法及注意事项，结合了多种场景下的解决方案： 一、快速更换浏览器IP的方法 1. 代理服务…...

编程日记 2025/7/19 9:52:32

《黑马前端ajax+node.js+webpack+git教程》（笔记）——ajax教程（axios教程）

黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajaxnode.jswebpackgit），一套全覆盖文章目录框架前置导学AJAX-Day01-01.AJAX入门与axios使用什么是AJAX如何使用AJAX使用axios获取数据案例axios语法尝试获取数据代…...

编程日记 2025/7/22 11:07:54

超级管理员租户资源初始化与授权管理设计方案

背景说明在多租户系统中，资源（如功能模块、系统菜单、服务能力等）需按租户维度进行授权管理。超级管理员在创建新租户时，需要初始化该租户的资源授权信息。两种可选方案方案描述方案 A：前端传入选中的资源列表创…...

编程日记 2025/7/8 22:01:03

【Python训练营打卡】day30 @浙大疏锦行

DAY 30 模块和库的导入知识点回顾： 1. 导入官方库的三种手段 2. 导入自定义库/模块的方式 3. 导入库/模块的核心逻辑：找到根目录（python解释器的目录和终端的目录不一致） 作业：自己新建几个不同路径文件尝试下如何…...

编程日记 2025/7/19 21:52:25

微前端记录

微前端实习过程中，做了些微前端方向的调研，记录下微前端将前端拆分为独立的可以单独运行，测试，部署的代码， 具有技术栈无关，多团队，多业务线协作的特点。前端现有的页面，分为单页…...

编程日记 2025/7/17 18:00:39

词嵌入基础

一前言最近在学习NLP方面知识，在此记录一下词嵌入的技术。二词袋法 1.理论就是统计一个句子或文章中，词语出现的次数。这方法有去重词袋法，无去重词袋法。 a 原理与案例 chinese_docs ["我爱自然语言处理","自然语…...

编程日记 2025/7/11 10:34:13

CSS之网页元素的显示与隐藏（旧土豆网遮罩案例）

网页元素的显示与隐藏。很多网页的侧边栏都会出现广告，我们点击关闭时，广告会消失不见，但若重新刷新网页页面，则广告会重新出现。网页的广告并非是真的被删除了，而是被暂时的隐藏起来了。 • display • visibil…...

编程日记 2025/7/22 20:15:48

关于 Web 漏洞原理与利用：2. XSS（跨站脚本攻击）

一、原理： 用户输入未过滤被执行攻击者输入的内容，如果没有被正确处理（过滤/转义），被网页原样输出到浏览器中，那么这些内容就可能会被浏览器当成代码执行，这就是 XSS（跨站脚本攻击…...

编程日记 2025/7/21 14:59:53

【TTS回顾】深度剖析 TTS 合成效果的客观评估与主观评价

如何评估合成音色的效果当我们面对一个新发布的 TTS 模型，或者在多个模型之间进行选择时，一个核心问题摆在我们面前：如何科学、全面地评估一个 TTS 模型的合成效果？仅仅凭感觉“听一听”显然不够客观和系统。我们需要一套行之有效的评估方法和指标体系，来衡量 AI “说话…...

编程日记 2025/7/17 14:46:32

WPF点击按钮弹出一个窗口

一、基本方法：直接实例化并显示窗口 1. 普通窗口（无参数） 适用场景：简单的弹出窗口，无需传递数据。 private void Button_Click(object sender, RoutedEventArgs e) { var newWindow new MyWindow(); // 实例化…...

编程日记 2025/7/22 14:55:37

WPF中的ObjectDataProvider：用于数据绑定的数据源之一

ObjectDataProvider是WPF(Windows Presentation Foundation)中一种强大而灵活的数据绑定源，它允许我们将对象实例、方法结果甚至是构造函数的返回值用作数据源。通过本文，我将深入探讨ObjectDataProvider的工作原理、使用场景以及如何在实际应用中发挥其…...

编程日记 2025/7/11 1:03:32