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

【React组件通讯双重视角】函数式 vs 类式开发指南

目录

前言

正文 

父组件向子组件传值

函数式写法 

类式写法 

子组件向父组件传值

函数式写法 

类式写法 

兄弟组件通信

函数式写法 

类式写法 

跨层级通信(使用Context)

函数式写法 

类式写法 

进阶通讯方式(补充说明)

一、事件总线:使用 EventEmitter

实现步骤:

二、Ref 传递:forwardRef + useImperativeHandle

实现步骤:

总结

事件总线(EventEmitter):

Ref 传递(forwardRef + useImperativeHandle):

结语 


前言

在现代前端开发中,React 作为最流行的 JavaScript 库之一,以其组件化、声明式编程和高性能的特点,成为构建用户界面的首选工具。然而,随着应用复杂度的提升,组件之间的通信问题逐渐成为开发者需要面对的核心挑战之一。无论是父子组件之间的数据传递,还是跨层级组件的状态共享,如何高效、优雅地实现组件间的通信,直接影响到代码的可维护性和应用的性能。

React 提供了多种组件通信的方式,以下是几种常见的模式:

  • Props 传递:父组件通过 props 向子组件传递数据。

  • 回调函数:子组件通过回调函数向父组件传递数据。

  • Context API:用于跨层级组件之间的数据共享。

  • 状态提升:将共享状态提升到共同的父组件中。

  • Ref 和事件机制:用于直接操作组件或触发事件。

接下来,我们将从 函数式组件 和 类式组件 两个角度,详细讲解这些通信方式的具体实现。

正文 

父组件向子组件传值

函数式写法 

// 父组件
function ParentComponent() {const [message] = useState('来自父组件的消息');return <ChildComponent message={message} />;
}// 子组件
function ChildComponent({ message }) {return <div>{message}</div>;
}

类式写法 

// 父组件
class ParentComponent extends React.Component {state = { message: '来自父组件的消息' };render() {return <ChildComponent message={this.state.message} />;}
}// 子组件
class ChildComponent extends React.Component {render() {return <div>{this.props.message}</div>;}
}

子组件向父组件传值

函数式写法 

// 父组件
function ParentComponent() {const handleChildData = (data) => {console.log('收到子组件数据:', data);};return <ChildComponent sendData={handleChildData} />;
}// 子组件
function ChildComponent({ sendData }) {const sendMessage = () => {sendData('子组件发送的消息');};return <button onClick={sendMessage}>发送消息</button>;
}

类式写法 

// 父组件
class ParentComponent extends React.Component {handleChildData = (data) => {console.log('收到子组件数据:', data);};render() {return <ChildComponent sendData={this.handleChildData} />;}
}// 子组件
class ChildComponent extends React.Component {sendMessage = () => {this.props.sendData('子组件发送的消息');};render() {return <button onClick={this.sendMessage}>发送消息</button>;}
}

兄弟组件通信

函数式写法 

function Parent() {const [sharedData, setSharedData] = useState('');return (<><SiblingA setData={setSharedData} /><SiblingB data={sharedData} /></>);
}function SiblingA({ setData }) {return <input onChange={(e) => setData(e.target.value)} />;
}function SiblingB({ data }) {return <div>接收到的数据: {data}</div>;
}

类式写法 

class Parent extends React.Component {state = { sharedData: '' };setSharedData = (data) => {this.setState({ sharedData: data });};render() {return (<><SiblingA setData={this.setSharedData} /><SiblingB data={this.state.sharedData} /></>);}
}class SiblingA extends React.Component {handleChange = (e) => {this.props.setData(e.target.value);};render() {return <input onChange={this.handleChange} />;}
}class SiblingB extends React.Component {render() {return <div>接收到的数据: {this.props.data}</div>;}
}

跨层级通信(使用Context)

函数式写法 

const MyContext = createContext();function App() {return (<MyContext.Provider value="全局数据"><MiddleComponent /></MyContext.Provider>);
}function MiddleComponent() {return <ChildComponent />;
}function ChildComponent() {const value = useContext(MyContext);return <div>{value}</div>;
}

类式写法 

const MyContext = React.createContext();class App extends React.Component {render() {return (<MyContext.Provider value="全局数据"><MiddleComponent /></MyContext.Provider>);}
}class MiddleComponent extends React.Component {render() {return <ChildComponent />;}
}class ChildComponent extends React.Component {static contextType = MyContext;render() {return <div>{this.context}</div>;}
}

进阶通讯方式(补充说明)

  1. 状态管理方案:Redux/MobX

  2. 事件总线:使用EventEmitter

  3. Ref传递:forwardRef + useImperativeHandle

  4. 状态库:Recoil/Zustand

一、事件总线

事件总线是一种跨组件通信的方式,适用于任意组件之间的通信,尤其是非父子关系的组件。通过事件总线,组件可以订阅和触发事件,从而实现数据传递。

这里用了一个mitt,所以要下载一个依赖

npm i mitt

实现步骤:
  1. 创建一个全局的事件总线。

  2. 在需要接收数据的组件中订阅事件。

  3. 在需要发送数据的组件中触发事件。

import React, { useEffect, useState } from 'react';
import mitt from 'mitt'// 创建全局事件总线
const eventBus = mitt()// 组件A:发送事件
function ComponentA() {const sendMessage = () => {eventBus.emit('message', 'Hello from ComponentA!')}return (<div><button onClick={sendMessage}>发送消息</button></div>)
}// 组件B:接收事件
function ComponentB() {const [message, setMessage] = useState('')useEffect(() => {// 订阅事件function isString(value: any): value is string {return typeof value === 'string'}const handleMessage = (data: any) => {if (isString(data)) {setMessage(data)}}eventBus.on('message', handleMessage)// 清理订阅return () => {eventBus.off('message', handleMessage)}}, [])return (<div><p>接收到的消息: {message}</p></div>)
}// 父组件
function App() {return (<div><ComponentA /><ComponentB /></div>);
}export default App;

二、Ref 传递:forwardRef + useImperativeHandle

forwardRef 和 useImperativeHandle 是 React 提供的用于操作子组件实例的 API。通过它们,父组件可以访问子组件的特定方法或属性。

实现步骤:
  1. 使用 forwardRef 包裹子组件,使其能够接收 ref

  2. 在子组件中使用 useImperativeHandle 暴露特定的方法或属性。

  3. 在父组件中通过 ref 调用子组件的方法。

import React, { useRef, useImperativeHandle, forwardRef } from 'react';interface ChildComponentRef {increment: () => voidgetCount: () => number
}// 子组件
const ChildComponent = forwardRef<ChildComponentRef>((props, ref) => {const [count, setCount] = useState(0)// 暴露方法给父组件useImperativeHandle(ref, () => ({increment: () => {setCount((prevCount) => prevCount + 1)},getCount: () => {return count},}))return (<div><p>子组件计数: {count}</p></div>)
})// 父组件
function ParentComponent() {const childRef = useRef<ChildComponentRef>(null)const handleIncrement = () => {if (childRef.current) {childRef.current.increment() // 调用子组件的 increment 方法}}const handleGetCount = () => {if (childRef.current) {alert('当前计数: ' + childRef.current.getCount()) // 调用子组件的 getCount 方法}}return (<div><ChildComponent ref={childRef} /><button onClick={handleIncrement}>增加计数</button><button onClick={handleGetCount}>获取计数</button></div>)
}
export default ParentComponent;

总结

事件总线(EventEmitter):
  • 适用于任意组件之间的通信。

  • 需要手动管理事件的订阅和清理。

  • 适合非父子关系的组件通信。

Ref 传递(forwardRef + useImperativeHandle):
  • 适用于父组件需要直接操作子组件方法或属性的场景。

  • 通过 useImperativeHandle 暴露特定的方法,保持组件的封装性。

  • 适合需要直接操作 DOM 或子组件逻辑的场景。 

结语 

希望本文的内容对你有用呦!

相关文章:

【React组件通讯双重视角】函数式 vs 类式开发指南

目录 前言 正文 父组件向子组件传值 函数式写法 类式写法 子组件向父组件传值 函数式写法 类式写法 兄弟组件通信 函数式写法 类式写法 跨层级通信&#xff08;使用Context&#xff09; 函数式写法 类式写法 进阶通讯方式&#xff08;补充说明&#xf…...

开源项目Perplexica-master

一个和https://www.perplexity.ai/差不多的开源项目 大模型的key可以用groq的&#xff0c;免费&#xff08;https://console.groq.com/keys&#xff09;&#xff0c;有速率限制 项目clone后&#xff0c;修改配置&#xff0c;项目根目录config.toml 填写对应的大模型的key就行…...

数值积分:通过复合梯形法计算

在物理学和工程学中&#xff0c;很多问题都可以通过数值积分来求解&#xff0c;特别是当我们无法得到解析解时。数值积分是通过计算积分区间内离散点的函数值来近似积分的结果。在这篇博客中&#xff0c;我将讨论如何使用 复合梯形法 来进行数值积分&#xff0c;并以一个简单的…...

DeepSeek全生态接入指南:官方通道+三大云平台

DeepSeek全生态接入指南&#xff1a;官方通道三大云平台 一、官方资源入口 1.1 核心交互平台 &#x1f5a5;️ DeepSeek官网&#xff1a; https://chat.deepseek.com/ &#xff08;体验最新对话模型能力&#xff09; 二、客户端工具 OllamaChatboxCherry StudioAnythingLLM …...

shell脚本的一些学习笔记----(三)流程控制

1.条件判断 if单条件判断 if [ 条件判断式 ] then 语句块 fi 案例1&#xff1a;统计根分区使用率 [rootlocalhost ~]$ vi sh/if1.sh #!/bin/bash #把根分区使用率作为变量值赋予变量rate rate$(df -h | grep "/dev/sda1" | awk {print $5}’| cut -d "%"-f…...

Docker Desktop WebAPI《1》

方法1 》》生成 的文档不要动&#xff0c; 》》执行 Container&#xff08;Dockerfile&#xff09; 会生成镜像文件和容器 》》生成的镜像和容器 在 Docker Desktop 中可以查看 用VS 的 Container Dockerfile 调试 但把这个调试工工具 停止&#xff0c;WebAPi就不能访问了 …...

Linux驱动层学习:LED 驱动开发

前置知识&#xff1a; 1、地址映射 MMU 全称叫做 Memory Manage Unit&#xff0c;也就是内存管理单元。 MMU 主要完成的功能如下&#xff1a; ①、完成虚拟空间到物理空间的映射。 ②、内存保护&#xff0c;设置存储器的访问权限&#xff0c;设置虚拟存储空间的缓冲特性。 第…...

全面解析鸿蒙(HarmonyOS)开发:从入门到实战,构建万物互联新时代

文章目录 引言 一、鸿蒙操作系统概述二、鸿蒙开发环境搭建三、鸿蒙核心开发技术1. **ArkUI框架**2. **分布式能力开发**3. **原子化服务与元服务** 四、实战案例&#xff1a;构建分布式音乐播放器五、鸿蒙开发工具与调试技巧六、鸿蒙生态与未来展望结语 引言 随着万物互联时代…...

zyNo.23

SQL注入漏洞 1.SQL语句基础知识 一个数据库由多个表空间组成&#xff0c;sql注入关系到关系型数据库&#xff0c;常见的关系型数据库有MySQL,Postgres,SQLServer,Oracle等 以Mysql为例&#xff0c;输入 mysql-u用户名-p密码 即可登录到MySQL交互式命令行界面。 既然是…...

调用DeepSeek API接口:实现智能数据挖掘与分析

在当今数据驱动的时代&#xff0c;企业和开发者越来越依赖高效的数据挖掘与分析工具来获取有价值的洞察。DeepSeek作为一款先进的智能数据挖掘平台&#xff0c;提供了强大的API接口&#xff0c;帮助用户轻松集成其功能到自己的应用中。本文将详细介绍如何调用DeepSeek API接口&…...

【Linux】Ubuntu Linux 系统——Node.js 开发环境

ℹ️大家好&#xff0c;我是练小杰&#xff0c;今天星期五了&#xff0c;同时也是2025年的情人节&#xff0c;今晚又是一个人的举个爪子&#xff01;&#xff01; &#x1f642; 本文是有关Linux 操作系统中 Node.js 开发环境基础知识&#xff0c;后续我将添加更多相关知识噢&a…...

Redis7——基础篇(一)

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09; 一、Redis定义 官网地址&#xff1a;Redis - The Real-time Data Platform R…...

MySQL查看存储过程和存储函数

【图书推荐】《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;》-CSDN博客 《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…...

js实现点击音频实现播放功能

目录 1. HTML 部分&#xff1a;音频播放控件 2. CSS 部分&#xff1a;样式设置 3. JavaScript 部分&#xff1a;音频控制 播放和暂停音频&#xff1a; 倒计时更新&#xff1a; 播放结束后自动暂停&#xff1a; 4. 总结&#xff1a; 完整代码&#xff1a; 今天通过 HTML…...

Ubuntu安装docker:docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli

具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 注意&#xff0c;选中 docker-desktop 而非 ./docker-desktop-amd64.de…...

免费deepseek的API获取教程及将API接入word或WPS中

免费deepseek的API获取教程: 1 https://cloud.siliconflow.cn/中注册时填写邀请码&#xff1a;GAejkK6X即可获取2000 万 Tokens; 2 按照图中步骤进行操作 将API接入word或WPS中 1 打开一个word&#xff0c;文件-选项-自定义功能区-勾选开发工具-左侧的信任中心-信任中心设置…...

华为交换机堆叠配置

华为交换机堆叠&#xff08;Stack&#xff09;技术是一种将多台物理交换机虚拟化为单一逻辑设备的高可靠性解决方案&#xff0c;可简化网络管理、提升带宽利用率并增强冗余能力。 一、堆叠的核心概念 堆叠系统组成&#xff1a;主交换机&#xff08;Master&#xff09;&#xf…...

基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现

基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现 本项目是一款基于Spring Boot和Vue.js开发的旅游景区管理系统&#xff0c;前端合后端的架构&#xff0c;支持用户在线浏览景区信息、预订门票&#xff0c;并提供完善的后台管理功能&#xff0c;包括订单管理…...

DeepSeek教unity------MessagePack-04

Union 联合 MessagePack for C# 支持序列化接口类型和抽象类类型的对象。它的行为类似于 XmlInclude 或 ProtoInclude。在 MessagePack for C# 中&#xff0c;这些被称为Union。只有接口和抽象类可以被 Union 属性注解。需要唯一的联合键。 /******************************…...

侯捷 C++ 课程学习笔记:C++ 新标准 11/14 的革新与实战应用

在侯捷老师的 C 系列课程中&#xff0c;《C 新标准 11/14》这门课程让我对现代 C 编程有了全新的认识。C11 和 C14 是 C 语言发展史上的重要里程碑&#xff0c;它们引入了大量新特性&#xff0c;极大地提升了语言的表达能力和开发效率。侯捷老师通过深入浅出的讲解和丰富的实战…...

MATLAB图像处理:Sobel、Roberts、Canny等边缘检测算子

边缘是图像中像素值剧烈变化的区域&#xff0c;反映了目标的轮廓、纹理等关键信息。边缘检测是图像分割、目标识别等任务的基础。本文将系统解析 六种经典边缘检测算子 的数学原理、实现方法及适用场景&#xff0c;并给出完整的MATLAB代码示例和对比分析。 1. 边缘检测基础 1…...

Python Pandas(7):Pandas 数据清洗

数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况&#xff0c;如果要使数据分析更加准确&#xff0c;就需要对这些没有用的数据进行处理。数据清洗与预处理的常见步骤&#xff1a; 缺失值处理&#xff1a;识别并…...

基于javaweb的SpringBootoa办公自动化系统设计和实现(源码+文档+部署讲解)

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 运行环境开发工具适用功能说明部分代码展示 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行…...

算法08-递归调用转为循环的通用方法

前导:问题引入 在Python中,递归调用过多会导致“递归深度过深”的错误,通常是因为递归没有正确终止条件或者递归层次太深。 这种错误通常会导致程序抛出 RecursionError 异常。 Python默认的递归深度限制大约是1000层(可以通过sys.getrecursionlimit()查看)。 修正方式…...

[qt5学习笔记]用vs2022(msvc2017)+copilot进行QtWidgetsApplication源码解析

一直没深入了解qt&#xff0c;又一段时间没写qt&#xff0c;重新捡起来。 开发环境 本地vs2022(msvc2017, v14.30)先升级到最新版本&#xff0c;方便使用copilot。 参考 VS2022QT5环境搭建 下载 qt5.14.2 用vs的qt插件设置qt5.14.2x86路径&#xff0c;x64版本未安装。 创建一…...

Nginx--日志(介绍、配置、日志轮转)

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、Nginx日志介绍 nginx 有一个非常灵活的日志记录模式&#xff0c;每个级别的配置可以有各自独立的访问日志, 所需日志模块 ngx_http_log_module 的…...

Transformer 模型介绍(一)——综述

Transformer 是一种完全基于注意力机制的神经网络模型&#xff0c;首次在2017年的论文《Attention Is All You Need》中提出。该模型最初用于机器翻译任务&#xff0c;并在特定任务中表现优于谷歌的其他神经网络机器翻译模型。Transformer 也是 Seq2Seq&#xff08;序列到序列&…...

Ceph集群搭建2025(squid版)

squid版本维护年限 apt install -y cephadmecho >> "deb http://mirrors.163.com/ceph/debian-squid/ bookworm main" echo >> "deb-src http://mirrors.163.com/ceph/debian-squid/ bookworm main"#安装源 cephadm install #开始初始化一个最…...

封装neo4j的持久层和服务层

目录 持久层 mp 模仿&#xff1a; 1.抽取出通用的接口类 2.创建自定义的repository接口 服务层 mp 模仿&#xff1a; 1.抽取出一个IService通用服务类 2.创建ServiceImpl类实现IService接口 3.自定义的服务接口 4.创建自定义的服务类 工厂模式 为什么可以使用工厂…...

HTML 简介

1.什么是 HTML&#xff1f; 超文本&#xff1a;暂且简单理解为 “超级的文本”&#xff0c;和普通文本比&#xff0c;内容更丰富。 标 记&#xff1a;文本要变成超文本&#xff0c;就需要用到各种标记符号。 语 言&#xff1a;每一个标记的写法、读音、使用规则&#xff0c…...

【AWS】EC2 安全组设置

在使用 Amazon Web Services (AWS) 的 EC2 实例时&#xff0c;很多用户会遇到关于 安全组 设置的问题&#xff0c;尤其是在创建或修改安全组时输入描述信息时。最近&#xff0c;有一个常见的错误是当用户在 EC2 安全组 配置中添加描述时&#xff0c;使用了中文字符&#xff0c;…...

git bisect 使用二分法查找引入错误的提交

git bisect 使用二分法查找引入错误的提交 Git bisect 命令官方文档 git bisect 这个命令使用二分搜索算法来查找项目历史中哪个提交引入了一个错误 使用该命令时&#xff0c;首先告诉它一个已知包含错误的 “坏” 提交 以及一个已知在错误出现之前的 “好” 提交 然后 git b…...

STM32 Flash详解教程文章

目录 Flash基本概念理解 Flash编程接口FPEC Flash擦除/写入流程图 Flash选项字节基本概念理解 Flash电子签名 函数读取地址下存放的数据 Flash的数据处理限制部分 编写不易&#xff0c;请勿搬运&#xff0c;感谢理解&#xff01;&#xff01;&#xff01; Flash基本概念…...

业务开发 | 基础知识 | Maven 快速入门

Maven 快速入门 1.Maven 全面概述 Apache Maven 是一种软件项目管理和理解工具。基于项目对象模型的概念&#xff08;POM&#xff09;&#xff0c;Maven 可以从中央信息中管理项目的构建&#xff0c;报告和文档。 2.Maven 基本功能 因此实际上 Maven 的基本功能就是作为 Ja…...

Python实现从SMS-Activate平台,自动获取手机号和验证码(进阶版2.0)

前言 本文是该专栏的第52篇,后面会持续分享python的各种干货知识,值得关注。 在本专栏之前,笔者在文章《Python实现SMS-Activate接口调用,获取手机号和验证码》中,有详细介绍基于SMS-Activate平台,通过python来实现自动获取目标国家的手机号以及对应的手机号验证码。 而…...

网络安全 | 安全信息与事件管理(SIEM)系统的选型与实施

网络安全 | 安全信息与事件管理&#xff08;SIEM&#xff09;系统的选型与实施 一、前言二、SIEM 系统的功能概述2.1 数据收集与整合2.2 实时监控与威胁检测2.3 事件响应与自动化2.4 合规性管理 三、SIEM 系统选型的关键因素3.1 功能需求评估3.2 可扩展性与性能3.3 易用性与可维…...

解决DeepSeek服务器繁忙问题

目录 解决DeepSeek服务器繁忙问题 一、用户端即时优化方案 二、高级技术方案 三、替代方案与平替工具&#xff08;最推荐简单好用&#xff09; 四、系统层建议与官方动态 用加速器本地部署DeepSeek 使用加速器本地部署DeepSeek的完整指南 一、核心原理与工具选择 二、…...

node.js+兰空图床实现随机图

之前博客一直用的公共的随机图API&#xff0c;虽然图片的质量都挺不错的&#xff0c;但是稳定性都比较一般&#xff0c;遂打算使用之前部署的兰空图床&#xff0c;自己弄一个随机图 本文章服务器操作基于雨云——新一代云服务提供商的云服务器进行操作&#xff0c;有兴趣的话可…...

DeepSeek vs ChatGPT:AI对决中的赢家是……人类吗?

DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f; 文章目录 DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f;一、引言1. 背景2. 问题 二、DeepSeek vs ChatGPT&#xff1a;谁更胜一筹&#xff1f;2.1 语言生成能力评测对比场景…...

mac搭建环境

从0-1搭建mac环境 先查看自己的芯片信息 bash uname -mbash-3.2$ uname -m arm64这里是自己的型号安装brew xcode-select --install xcode-select -p /bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)” source /Users/lanren/.…...

【R语言】t检验

一、基本介绍 t检验&#xff08;t-test&#xff09;是用于比较两个样本均值是否存在显著差异的一种统计方法。 t.test()函数的调用格式&#xff1a; t.test(x, yNULL, alternativec("two.sided", "less", "greater"), mu0, pairFALSE, var.eq…...

尚硅谷爬虫note005

一、编解码 1.get请求的quote方法 将汉字转为Unicode字符 # _*_ coding : utf-8 _*_ # Time : 2025/2/12 16:33 # Author : 20250206-里奥 # File : demo19_get请求的quote方法 # Project : PythonProject10-14# 景甜page # https://www.baidu.com/s?ieutf-8&f8&rsv…...

词袋模型和词嵌入模型区别和关联分析(词袋模型是否属于词嵌入模型)

词袋模型&#xff08;Bag of Words, BoW&#xff09;不属于词嵌入模型&#xff0c;它们是两种完全不同的文本表示方法。以下从多个维度对比二者的核心区别 1. 本质区别 特性词袋模型 (BoW)词嵌入模型 (Word Embedding)表示形式离散的稀疏向量&#xff08;高维&#xff0c;维度…...

借用python 学习 VM的 FTP(VisionMaster4.3)

无懒不python:看官方V社区有介绍: 需要安装 Quick Easy FTP Server V4.0.0.exe 为了表示敬意再次放出链接: V社区-机器智能技术交流-VM关于FTP存图的一点分享 好了VM先放一边 先用python自收 自发: 毕竟这个免费 FTP服务端: 0.ftpserver.py 需要安装的库 和 注意事项已经在…...

BDD风格测试

BDD风格测试&#xff08;Behavior-Driven Development&#xff09; BDD&#xff08;行为驱动开发&#xff09;是一种以自然语言描述系统行为的测试方法论&#xff0c;强调团队协作与业务价值验证。结合Mockito的BDD风格API&#xff0c;可以编写更符合业务场景描述、更易读的测…...

[免费]Springboot+Vue医疗(医院)挂号管理系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringbootVue医疗(医院)挂号管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue医疗(医院)挂号管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 在如今社会上&#xff0c;关于信息上…...

Linux 查看磁盘中的大文件

在 Linux 系统中&#xff0c;你可以使用以下方法来查看磁盘中的大文件信息&#xff1a; 1. 使用 find 命令 find 命令可以递归查找指定目录下的大文件。 find /path/to/directory -type f -size 100M -exec ls -lh {} \;/path/to/directory&#xff1a;要查找的目录路径&…...

浅识MQ的 Kafka、ActiveMQ、RabbitMQ、RocketMQ区别

DeepSeek回复&#xff1a; 以下是主流消息队列&#xff08;MQ&#xff09;的对比分析&#xff0c;结合核心特性、适用场景和实际案例说明&#xff1a; 一、主流MQ对比分析 维度 Kafka RabbitMQ RocketMQ ActiveMQ所属公司Apache&#xff08;LinkedIn开源&#xff09;…...

君海游戏岗位,需要私我

游戏岗位内推啦&#xff0c;需要找我哈 共14个职位 广告投放主管 社会招聘全国 广告投放 社会招聘全国 设计主管 社会招聘全国 海外投放 社会招聘广东省广州市 海外运营 社会招聘广东省广州市 产品运营专员 社会招聘广东省广州市 平台运营 社会招聘广东…...

Vue2/Vue3分别如何使用Watch

在 Vue 2 和 Vue 3 中&#xff0c;watch 用于监听数据的变化并执行相应的逻辑。虽然两者的核心功能相同&#xff0c;但在语法和使用方式上有一些区别。以下是 Vue 2 和 Vue 3 中使用 watch 的详细说明&#xff1a; Vue 2 中的 watch 在 Vue 2 中&#xff0c;watch 是通过选项式…...