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

React底层架构深度解析:从虚拟DOM到Fiber的演进之路


一、虚拟DOM:性能优化的基石
1.1 核心工作原理
React通过JSX语法将组件转换为轻量级JavaScript对象(即虚拟DOM),而非直接操作真实DOM。这一过程由React.createElement()实现,其结构包含元素类型、属性和子节点等信息(参考示例):

// JSX转换为虚拟DOM结构
React.createElement("div", { className: "app" }, React.createElement("h1", null, "Hello React")
);

核心优势:
• 性能飞跃:通过Diff算法对比新旧虚拟DOM差异,仅更新变化部分,减少真实DOM操作次数

• 跨平台能力:抽象出与平台无关的UI描述,支持Web、Native、VR等多端渲染

1.2 Diff算法优化策略
React采用三级比对策略将时间复杂度从O(n³)降至O(n):

  1. Tree Diff:仅同层级节点比对,跨层级移动直接重建(如B节点从A移动到C)
  2. Component Diff:同类型组件通过shouldComponentUpdate优化渲染,不同类型直接替换
  3. Element Diff:通过key标识列表元素,复用相同节点并最小化移动操作
// 正确使用key的列表渲染
<ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>

二、Fiber架构:重构渲染引擎
2.1 架构革新目标
React 16引入Fiber架构,解决同步渲染阻塞问题:
• 任务分片:将组件树拆解为可中断的Fiber节点链表,每个节点包含组件类型、状态等信息

• 优先级调度:通过expirationTime标记任务优先级,用户交互等高优先级任务可打断后台渲染

• 双缓冲技术:维护current(当前树)与workInProgress(构建树),避免渲染过程出现页面闪烁

2.2 并发模式实现
React 18+的并发特性基于Fiber实现:
• 可中断渲染:暂停长任务处理即时交互(如输入框响应)

• 自动批处理:合并多次setState更新,减少不必要的渲染次数

• 过渡更新:通过startTransition标记非紧急更新,保持界面流畅


三、合成事件系统:高效的事件管理
3.1 设计哲学
• 事件池机制:复用事件对象减少内存分配(需通过e.persist()保留引用)

• 浏览器兼容:统一事件处理逻辑,消除跨浏览器差异

• 性能优化:事件委托到根节点而非绑定到每个元素,降低内存消耗

3.2 执行顺序特性

// 原生事件先于React合成事件执行
document.addEventListener('click', () => console.log(1));
element.onClick = () => console.log(2); // React合成事件输出3

四、状态管理与Hooks革命
4.1 状态更新机制
• 异步批量更新:setState通过队列合并更新请求,避免频繁重渲染

• 闭包陷阱:函数式更新保证获取最新状态

// 正确写法
setCount(prev => prev + 1);

4.2 Hooks底层实现
• 链表存储:保持多个useState调用顺序稳定

• Effect调度:useEffect依赖数组控制副作用执行时机

function Counter() {const [count, setCount] = useState(0);// 闭包保存当前作用域状态useEffect(() => { document.title = `Count: ${count}` }, [count]);
}

五、性能优化进阶策略

  1. 记忆化技术:
    React.memo:浅比较props阻止无效渲染

    useMemo/useCallback:缓存计算密集型结果

  2. 代码分割:

    const LazyComponent = React.lazy(() => import('./HeavyComponent'));
    <Suspense fallback={<Spinner />}><LazyComponent />
    </Suspense>
    
  3. DOM操作优化:优先使用transformopacity触发GPU加速


六、未来演进方向

  1. 服务端组件:在服务端预渲染静态内容,减少客户端负担
  2. React Native重构:Fabric架构直接调用原生UI组件,消除桥接延迟
  3. 编译时优化:通过编译器(如React Forget)自动生成记忆化代码

结语:设计哲学启示
React通过声明式编程与分层抽象,将复杂的DOM操作转化为可预测的状态管理。如同智能快递员精准分拣包裹,Fiber架构让界面更新变得流畅高效。深入理解这些机制,不仅能编写高性能代码,更能洞察现代前端框架的设计智慧。

(本文综合引用了等资料,如需了解具体实现细节,可查阅React官方源码库及上述参考文献)

以下从 核心定位、状态管理、作用范围、复用性 及 与框架的集成 五个维度,系统解析 React Hooks、自定义 Hooks 和普通 utils 的区别:


一、核心定位差异

  1. React Hooks
    • 本质:React 提供的特殊函数(如 useStateuseEffect),用于在函数组件中实现类组件的状态和生命周期能力。

    • 核心能力:直接操作 React 内部状态和副作用(如组件渲染后的 DOM 操作、订阅事件)。

    • 规则约束:必须遵守调用顺序一致性原则,只能在组件顶层或自定义 Hooks 中使用。

  2. 自定义 Hooks
    • 本质:基于 React Hooks 封装的逻辑单元,以 use 开头的函数形式存在。

    • 核心能力:将组件逻辑解耦为可复用的模块(如网络请求、表单验证),保持状态的独立性。

    • 示例:

    function useCounter(initialValue) {const [count, setCount] = useState(initialValue);const increment = () => setCount(c => c + 1);return { count, increment }; // 返回状态与操作方法
    }
    
  3. 普通 utils
    • 本质:纯工具函数,仅处理数据计算或逻辑转换(如日期格式化、数组排序)。

    • 核心限制:无状态管理能力,无法感知 React 生命周期或副作用。

    • 示例:

    function sum(a, b) { return a + b; } // 无状态依赖的纯函数
    

二、状态管理与副作用

特性React Hooks自定义 Hooks普通 utils
状态绑定✅ 与组件实例绑定✅ 封装独立状态❌ 无状态
副作用处理✅ 通过 useEffect✅ 继承 Hooks 能力❌ 无法处理
响应式更新✅ 自动触发组件渲染✅ 依赖 Hooks 机制❌ 无响应性

典型场景:
• Hooks:管理表单输入状态(useState)、监听窗口尺寸变化(useEffect + resize 事件)。

• utils:验证邮箱格式、生成随机 ID,仅依赖输入参数且无副作用。


三、作用范围与框架耦合性

  1. React Hooks
    • 强耦合:完全依赖 React 的 Fiber 架构和调度机制。

    • 作用域:仅在 React 组件或自定义 Hooks 中生效。

  2. 自定义 Hooks
    • 逻辑封装:可跨组件复用状态逻辑(如用户登录状态管理),但需遵循 React 规则。

    • 独立性:每个组件调用 Hook 时生成独立状态副本,避免污染。

  3. 普通 utils
    • 无框架依赖:可在任何 JavaScript 环境(包括非 React 项目)中使用。

    • 无上下文感知:无法访问组件 Props 或 Context。


四、复用性与设计模式

维度React Hooks自定义 Hooks普通 utils
复用目标状态逻辑复用业务逻辑复用工具逻辑复用
设计模式组合式编程高阶函数封装函数式编程
典型复用场景跨组件共享表单验证封装 API 请求逻辑复用数据格式化方法

示例对比:
• 自定义 Hooks:

function useFetch(url) {const [data, setData] = useState(null);useEffect(() => {fetch(url).then(res => setData(res.json()));}, [url]);return data; // 封装数据请求逻辑
}

• utils:

function formatDate(timestamp) {return new Date(timestamp).toLocaleString(); // 纯数据转换
}

五、选择策略与最佳实践

  1. 何时使用 Hooks
    • 需要管理组件状态(如计数器、表单输入)。

    • 需处理副作用(如订阅事件、操作 DOM)。

    • 需复用与组件生命周期相关的逻辑。

  2. 何时使用 utils
    • 纯数据转换(如金额格式化、数组排序)。

    • 与框架无关的工具方法(如生成 UUID、深拷贝对象)。

  3. 混合使用建议
    • 将 utils 作为自定义 Hooks 的底层工具(如用 formatDate 处理 useFetch 返回的数据)。

    • 避免在 utils 中直接操作 React 状态,以保持逻辑纯净。


总结

维度React Hooks自定义 Hooks普通 utils
核心目的赋予函数组件状态与生命周期能力封装可复用的 React 状态逻辑提供与框架无关的纯工具函数
数据响应✅ 自动触发渲染更新✅ 继承响应式特性❌ 无响应性
框架依赖强耦合(仅限 React 生态)强耦合无依赖

通过合理区分三者,可显著提升代码可维护性。复杂业务场景下,建议优先通过自定义 Hooks 抽象逻辑,再辅以 utils 处理纯数据操作。

相关文章:

React底层架构深度解析:从虚拟DOM到Fiber的演进之路

一、虚拟DOM&#xff1a;性能优化的基石 1.1 核心工作原理 React通过JSX语法将组件转换为轻量级JavaScript对象&#xff08;即虚拟DOM&#xff09;&#xff0c;而非直接操作真实DOM。这一过程由React.createElement()实现&#xff0c;其结构包含元素类型、属性和子节点等信息&a…...

今日行情明日机会——20250516

上证缩量收阴线&#xff0c;小盘股表现相对更好&#xff0c;上涨的个股大于下跌的&#xff0c;日线已到前期压力位附近&#xff0c;注意风险。 深证缩量收假阳线&#xff0c;临近日线周期上涨末端&#xff0c;注意风险。 2025年5月16日涨停股行业方向分析 机器人概念&#x…...

小结:网页性能优化

网页性能优化是提升用户体验、减少加载时间和提高资源利用率的关键。以下是针对网页生命周期和事件处理的性能优化技巧&#xff0c;结合代码示例&#xff0c;重点覆盖加载、渲染、事件处理和资源管理等方面。 1. 优化加载阶段 减少关键资源请求&#xff1a; 合并CSS/JS文件&a…...

2025年PMP 学习十五 第10章 项目资源管理

2025年PMP 学习十五 第10章 项目资源管理 序号过程过程组1规划沟通管理规划2管理沟通执行3监控沟通监控 项目沟通管理包括为确保项目的信 息及时且恰当地规划、收集、生成、发布、存储、检索、管理、控制、监 警和最终处理所需的过程&#xff1b; 项目经理绝大多数时间都用于与…...

速通RocketMQ配置

配置RocketMQ又出问题了&#xff0c;赶紧记录一波 这个是我的RocketMQ配置文件 通过网盘分享的文件&#xff1a; 链接: https://pan.baidu.com/s/1UUYeDvKZFNsKPFXTcalu3A?pwd8888 提取码: 8888 –来自百度网盘超级会员v9的分享 里面有这三个东西 里面还有一些broker和names…...

宇宙中是否存在量子现象?

一、宇宙中的量子现象 好的&#xff0c;请提供具体的搜索词或意图&#xff0c;以便进行检索和生成简洁的回答。 好的&#xff0c;请提供具体的搜索词或意图&#xff0c;以便进行检索和生成简洁的回答。 量子涨落与宇宙结构 早期宇宙的量子涨落&#xff08;微观尺度的不确定性…...

背包问题详解

一、问题引入&#xff1a;什么是背包问题&#xff1f; 背包问题是经典的动态规划问题&#xff0c;描述如下&#xff1a; 有一个容量为 m 的背包 有 n 个物品&#xff0c;每个物品有体积 v 和价值 w 目标&#xff1a;选择物品装入背包&#xff0c;使总价值最大且总体积不超过…...

oracle linux 95 升级openssh 10 和openssl 3.5 过程记录

1. 安装操作系统&#xff0c;注意如果可以选择&#xff0c;选择安装开发工具&#xff0c;主要是后续需要编译安装&#xff0c;需要gcc 编译工具。 2. 安装操作系统后&#xff0c;检查zlib 、zlib-dev是否安装&#xff0c;如果没有&#xff0c;可以使用安装镜像做本地源安装&a…...

Tomcat发布websocket

一、tomcal的lib放入文件 tomcat-websocket.jar websocket-api.jar 二、代码示例 package com.test.ws;import com.test.core.json.Jmode;import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.util.concurrent.CopyOnWriteArraySet; imp…...

[思维模式-41]:在确定性与不确定性的交响中:人类参与系统的韧性密码。

前言&#xff1a; “任何信息系统&#xff0c;无论怎么复杂&#xff0c;哪怕是几万人同时开发的系统&#xff0c;如无线通信网络&#xff0c;通过标准、设计、算法、完毕的测试、过程的管控等&#xff0c;都是可预测和确定性的。 一个系统&#xff0c;一旦叠加了人的元素和因素…...

维智定位 Android 定位 SDK

概述 维智 Android 定位 SDK是为 Android 移动端应用提供的一套简单易用的定位服务接口&#xff0c;为广大开发者提供融合定位服务。通过使用维智定位SDK&#xff0c;开发者可以轻松为应用程序实现极速、智能、精准、高效的定位功能。 重要&#xff1a;为了进一步加强对最终用…...

Vue3:脚手架

工程环境配置 1.安装nodejs 这里我已经安装过了&#xff0c;只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs&#xff0c;安装直接一直下一步下一步 安装完成之后我们来使用电脑的命令行窗口检查一下版本 查看npm源 这里npm源的地址是淘宝的源&#xff0…...

Android native崩溃问题分析

最近在做NDK项目的时候&#xff0c;出现了启动应用就崩溃了&#xff0c;崩溃日志如下&#xff1a; 10:41:04.743 A Build fingerprint: samsung/g0qzcx/g0q:13/TP1A.220624.014/S9060ZCU4CWH1:user/release-keys 10:41:04.743 A Revision: 12 10:41:04.743 A ABI: arm64…...

Playwright vs Selenium:2025 年 Web 自动化终极对比指南

1. 引言 Web 自动化领域正在迅速发展&#xff0c;在 2025 年&#xff0c;Playwright 与 Selenium 之间的选择已成为开发团队面临的重要决策。Selenium 作为行业标准已有十多年&#xff0c;而 Playwright 作为现代替代方案&#xff0c;以卓越的性能和现代化特性迅速崛起。 本指…...

数据结构(3)线性表-链表-单链表

我们学习过顺序表时&#xff0c;一旦对头部或中间的数据进行处理&#xff0c;由于物理结构的连续性&#xff0c;为了不覆盖&#xff0c;都得移&#xff0c;就导致时间复杂度为O&#xff08;n&#xff09;&#xff0c;还有一个潜在的问题就是扩容&#xff0c;假如我们扩容前是10…...

Python 中的 typing.ClassVar 详解

一、ClassVar 的定义和基本用途 ClassVar 是 typing 模块中提供的一种特殊类型&#xff0c;用于在类型注解中标记类变量&#xff08;静态变量&#xff09;。根据官方文档&#xff0c;使用 ClassVar[…] 注释的属性表示该属性只在类层面使用&#xff0c;不应在实例上赋值 例如&…...

主流数据库运维故障排查卡片式速查表与视觉图谱

主流数据库运维故障排查卡片式速查表与视觉图谱 本文件将主文档内容转化为模块化卡片结构&#xff0c;并补充数据库结构图、排查路径图、锁机制对比等视觉图谱&#xff0c;以便在演示、教学或现场排障中快速引用。 &#x1f4cc; 故障卡片速查&#xff1a;连接失败 数据库检查…...

Unity:延迟执行函数:Invoke()

目录 Unity 中的 Invoke() 方法详解 什么是 Invoke()&#xff1f; 基本使用方法 使用要点 延伸功能 ❗️Invoke 的局限与注意事项 在Unity中&#xff0c;延迟执行函数是游戏逻辑中常见的需求&#xff0c;比如&#xff1a; 延迟切换场景 延迟播放音效或动画 给玩家时间…...

医学影像系统性能优化与调试技术:深度剖析与实践指南

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开…...

【HTML5学习笔记1】html标签(上)

web标准&#xff08;重点&#xff09; w3c 构成&#xff1a;结构、表现、行为&#xff0c;结构样式行为相分离 结构&#xff1a;网页元素整理分类 html 表现&#xff1a;外观css 行为&#xff1a;交互 javascript html标签 1.html语法规范 1&#xff09; 所有标签都在…...

SearchIndexablesProvider

实现的 provider 根据索引添加文档可知&#xff0c;该 provider 需要继承自 frameworks/base/core/java/android/provider/SearchIndexablesProvider.java 类&#xff0c;并且添加权限 android.permission.READ_SEARCH_INDEXABLES。过滤 Settings 代码&#xff0c;可以轻易找到…...

《k-means 散点图可视化》实验报告

一&#xff0c;实验目的 本次实验旨在通过Python编程实现k - means算法的散点图可视化。学习者将编写代码&#xff0c;深入理解聚类分析基本原理与k - means算法实现流程&#xff0c;掌握数据聚类及可视化方法&#xff0c;以直观展示聚类结果。 二&#xff0c;实验原理 k-mea…...

数学复习笔记 12

前言 现在做一下例题和练习题。矩阵的秩和线性相关。另外还要复盘前面高数的部分的内容。奥&#xff0c;之前矩阵的例题和练习题&#xff0c;也没有做完&#xff0c;行列式的例题和练习题也没有做完。累加起来了。以后还是得学一个知识点就做一个部分的内容&#xff0c;日拱一…...

Web-CSS入门

WEB前端&#xff0c;三部分&#xff1a;HTML部分、CSS部分、Javascript部分。 1.HTML部分&#xff1a;主要负责网页的结构层 2.CSS部分&#xff1a;主要负责网页的样式层 3.JS部分&#xff1a;主要负责网页的行为层 **基本概念** 层叠样式表&#xff0c;Cascading Style Sh…...

Qt/C++编写音视频实时通话程序/画中画/设备热插拔/支持本地摄像头和桌面

一、前言 近期有客户提需求&#xff0c;需要在嵌入式板子上和电脑之间音视频通话&#xff0c;要求用Qt开发&#xff0c;可以用第三方的编解码组件&#xff0c;能少用就尽量少用&#xff0c;以便后期移植起来方便。如果换成5年前的知识储备&#xff0c;估计会采用纯网络通信收发…...

Ubuntu快速安装Python3.11及多版本管理

之前文章和大家分享过&#xff0c;将会出一篇专栏&#xff08;从电脑装ubuntu系统&#xff0c;到安装ubuntu的常用基础软件&#xff1a;jdk、python、node、nginx、maven、supervisor、minio、docker、git、mysql、redis、postgresql、mq、ollama等&#xff09;&#xff0c;目前…...

Qt功能区:Ribbon使用

Ribbon使用 1. Ribbon功能区介绍1.1 样式 2. 基本功能区设置2.1 安装动态库&#xff08;推荐&#xff09;2.2 在MainWindow中使用Ribbon2.3 在QWidget中使用SARibbonBar2.4 创建Category和Pannel2.5 ContextCategory 上下文标签创建 2.6 ApplicationButton2.7 QuickAccessBar和…...

【学习心得】Jupyter 如何在conda的base环境中其他虚拟环境内核

如果你在conda的base环境运行了jupyter lab打开了一个ipynb文本&#xff0c;此时选择的内核是base虚拟环境的Python内核&#xff0c;如果我想切换成其他conda虚拟环境来运行这个文件该怎么办&#xff1f;下面我们试着还原一下问题&#xff0c;并且解决问题。 【注】 这个问题出…...

在微创手术中使用Kinova轻型机械臂进行多视图图像采集和3D重建

在微创手术中&#xff0c;Kinova轻型机械臂通过其灵活的运动控制和高精度的操作能力&#xff0c;支持多视图图像采集和3D重建。这种技术通过机械臂搭载的光学系统实现精准的多角度扫描&#xff0c;为医疗团队提供清晰且详细的解剖结构模型。其核心在于结合先进的传感器配置与重…...

[Java][Leetcode middle] 238. 除自身以外数组的乘积

第一个想法是&#xff1a; 想求出所有元素乘积&#xff0c;然后除以i对应的元素本书&#xff1b;这个想法是完全错误的&#xff1a; nums[I] 可能有0题目要求了不能用除法 第二个想法是&#xff1a; 其实写之前就知道会超时&#xff0c;但是我什么都做不到啊&#xff01; 双…...

【leetcode】144. 二叉树的前序遍历

给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 解释&#xff1a; 示例 2&#xff1a; 输入&#xff1a;root [1,2,3,4,5,null,8,null,null,6,7,9] 输出&#xff1a…...

SpringBoot常用注解详解

文章目录 1. 前言2. 核心注解2.1 SpringBootApplication2.2 Configuration2.3 EnableAutoConfiguration2.4 ComponentScan2.5 Bean2.6 Autowired2.7 Qualifier2.8 Primary2.9 Value2.10 PropertySource2.11 ConfigurationProperties2.12 Profile 3. Web开发相关注解3.1 Control…...

中文分词与数据可视化02

jieba 库简介 jieba&#xff08;结巴分词&#xff09;是一个高效的中文分词工具&#xff0c;广泛用于中文自然语言处理&#xff08;NLP&#xff09;任务。它支持以下功能&#xff1a; 分词&#xff1a;将句子切分为独立的词语。 自定义词典&#xff1a;添加专业词汇或新词&am…...

SSH主机密钥验证失败:全面解决方案与技术手册

一、问题本质与安全机制解析 SSH(Secure Shell)的主机密钥验证是安全通信的核心机制&#xff0c;当出现"Host key verification failed"错误时&#xff0c;表明客户端检测到服务器身份异常。这种设计可有效防范中间人攻击(Man-in-the-Middle)&#xff0c;其工作原理…...

buuctf Crypto-鸡藕椒盐味1

1.题目&#xff1a; 公司食堂最新出了一种小吃&#xff0c;叫鸡藕椒盐味汉堡&#xff0c;售价八块钱&#xff0c;为了促销&#xff0c;上面有一个验证码&#xff0c;输入后可以再换取一个汉堡。但是问题是每个验证码几乎都有错误,而且打印的时候倒了一下。小明买到了一个汉堡&a…...

真题卷001——算法备赛

蓝桥杯2024年C/CB组国赛卷 1.合法密码 问题描述 小蓝正在开发自己的OJ网站。他要求用户的密码必须符合一下条件&#xff1a; 长度大于等于8小于等于16必须包含至少一个数字字符和至少一个符号字符 请计算一下字符串&#xff0c;有多少个子串可以当作合法密码。字符串为&am…...

基于MCP的桥梁设计规范智能解析与校审系统构建实践

引言 在腾讯云开发者社区中&#xff0c;有多种MCP工具可以用于本系统的开发和优化中&#xff0c;以下是一些潜在的应用场景&#xff1a; ‌PDF解析工具‌&#xff1a;如pdfplumber等&#xff0c;可以用于规范文件的预处理&#xff0c;提取文本和图像信息。‌自然语言处理工具…...

matlab与python问题解析

Python requests乱码的五种解决办法 Python requests乱码的五种解决办法_requests.get乱码-CSDN博客 requests库post请求参数data、json和files的使用 requests库post请求参数data、json和files的使用_requests post data-CSDN博客 如何在浏览器中查看POST请求提交的数据内…...

【分布式锁通关指南 10】源码剖析redisson之MultiLock的实现

引言 本期我们将把目光聚焦在 Redisson 中另一个颇具代表性的分布式锁实现——MultiLock。它的核心思想是&#xff1a;一次性对多个独立的 RLock 进行加锁或解锁操作&#xff0c;只有当多个锁都成功加锁时才算真正完成锁的获取&#xff0c;一旦有任何一个失败&#xff0c;整体操…...

MySQL 8.0 OCP 1Z0-908 131-140题

Q131.You have upgraded the MySQL binaries from 5.7.28 to 8.0.18 by using an in-place upgrade. Examine the message sequence generated during the first start of MySQL 8.0.18: 。。。[System]。。。/usx/sbin/mysqld (mysqld 8.0.18-commercial) starting as process…...

实战解析MCP-使用本地的Qwen-2.5模型-AI协议的未来?

文章目录 目录 文章目录 前言 一、MCP是什么&#xff1f; 1.1MCP定义 1.2工作原理 二、为什么要MCP&#xff1f; 2.1 打破碎片化的困局 2.2 实时双向通信&#xff0c;提升交互效率 2.3 提高安全性与数据隐私保护 三、MCP 与 LangChain 的区别 3.1 目标定位不同 3.…...

从零开始学习three.js(20):three.js实现天气与时间动态效果(白天,黑夜,下雨,下雪)

基于Three.js的天气与时间动态效果实现 本文将通过代码解析&#xff0c;介绍如何使用Three.js实现动态天气&#xff08;下雨、下雪&#xff09;和时间&#xff08;白天、黑夜&#xff09;切换效果。完整代码基于一个交互式天气模拟项目&#xff0c;支持粒子密度、速度和环境亮…...

sqli-labs靶场23-28a关(过滤)

目录 less23&#xff08;--过滤&#xff09; less24&#xff08;二次注入&#xff09; less25&#xff08;or过滤&#xff09; less25a&#xff08;or过滤&#xff09; less26&#xff08;--和空格过滤报错&#xff09; less26a&#xff08;--空格过滤盲注&#xff09; …...

Sigmoid与Softmax:从二分类到多分类的深度解析

Sigmoid与Softmax:从二分类到多分类的深度解析 联系 函数性质:二者都是非线性函数 ,也都是指数归一化函数,可将输入值映射为0到1之间的实数 ,都能把输出转化成概率分布的形式,在神经网络中常作为激活函数使用。Softmax是Sigmoid的推广:从功能角度看,Softmax函数可视为…...

uni-app x正式支持鸿蒙原生应用开发

DCloud发布的HBuilderX 4.64正式版&#xff0c;支持编译uni-app x项目到鸿蒙平台&#xff0c;实现跨平台开发鸿蒙原生应用。至此&#xff0c;uni-app x 已经完成Android、iOS、鸿蒙、Web、微信小程序等主流平台全覆盖。 uni-app x&#xff0c;是下一代 uni-app&#xff0c;是一…...

【软件推荐——pdf2docx】

pdf2docx Open source Python library for converting PDF to DOCX. https://github.com/ArtifexSoftware/pdf2docx Install pip install pdf2docx使用 from pdf2docx import Converterpdf_file D:\my\c4611_sample_explain.pdf docx_file D:\my\c4611_sample_explain.d…...

HarmonyOS开发组件基础

个人简介 &#x1f468;‍&#x1f4bb;‍个人主页&#xff1a; 魔术师 &#x1f4d6;学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全栈发展 &#x1f6b4;个人状态&#xff1a; 研发工程师&#xff0c;现效力于政务服务网事业 &#x1f1e8;&#x1f1f3;人生格言&…...

JMeter 测试工具--组件--简单介绍

目录 ​编辑 一、测试计划&#xff08;Test Plan&#xff09; 二、线程组&#xff08;Thread Group&#xff09; 三、取样器&#xff08;Sampler&#xff09; 四、监听器&#xff08;Listener&#xff09; 五、逻辑控制器&#xff08;Logic Controller&#xff09; 六、断…...

ECPF 简介

ECPF&#xff08;Embedded CPU Function&#xff0c;嵌入式CPU功能&#xff09;是NVIDIA BlueField DPU特有的一种功能类型&#xff0c;和PF&#xff08;Physical Function&#xff0c;物理功能&#xff09;、VF&#xff08;Virtual Function&#xff0c;虚拟功能&#xff09;密…...

【Opencv】canny边缘检测提取中心坐标

采用opencv 对图像中的小球通过canny边缘检测的方式进行提取坐标 本文介绍了如何使用OpenCV对图像中的小球进行Canny边缘检测&#xff0c;并通过Zernike矩进行亚像素边缘检测&#xff0c;最终拟合椭圆以获取小球的精确坐标。首先&#xff0c;图像被转换为灰度图并进行高斯平滑…...