26.useScript
在 Web 应用开发中，动态加载外部脚本是一个常见需求，特别是在需要集成第三方库或服务时。然而，在 React 应用中管理脚本加载可能会变得复杂。useScript 钩子提供了一种优雅的方式来处理外部脚本的加载、错误处理和清理，使得在 React 组件中动态加载脚本变得简单和可靠。以下是如何实现和使用这个自定义钩子：
const useScript = src => {const [status, setStatus] = React.useState(src ? 'loading' : 'idle');React.useEffect(() => {if (!src) {setStatus('idle');return;}let script = document.querySelector(`script[src="${src}"]`);if (!script) {script = document.createElement('script');script.src = src;script.async = true;script.setAttribute('data-status', 'loading');document.body.appendChild(script);const setDataStatus = event => {script.setAttribute('data-status',event.type === 'load' ? 'ready' : 'error');};script.addEventListener('load', setDataStatus);script.addEventListener('error', setDataStatus);} else {setStatus(script.getAttribute('data-status'));}const setStateStatus = event => {setStatus(event.type === 'load' ? 'ready' : 'error');};script.addEventListener('load', setStateStatus);script.addEventListener('error', setStateStatus);return () => {if (script) {script.removeEventListener('load', setStateStatus);script.removeEventListener('error', setStateStatus);}};}, [src]);return status;
};const script ='data:text/plain;charset=utf-8;base64,KGZ1bmN0aW9uKCl7IGNvbnNvbGUubG9nKCdIZWxsbycpIH0pKCk7';const Child = () => {const status = useScript(script);return <p>Child status: {status}</p>;
};const MyApp = () => {const status = useScript(script);return (<><p>Parent status: {status}</p><Child /></>);
};ReactDOM.createRoot(document.getElementById('root')).render(<MyApp />
);这个技巧的关键点包括：
使用
useState来跟踪脚本的加载状态。使用
useEffect来处理脚本的加载、错误处理和清理逻辑。检查是否已存在相同 src 的脚本元素，避免重复加载。
使用
data-status属性来跟踪脚本的加载状态。添加事件监听器来处理加载成功和失败的情况。
使用这个钩子时，需要注意以下几点：
相关文章：
26.useScript
在 Web 应用开发中，动态加载外部脚本是一个常见需求，特别是在需要集成第三方库或服务时。然而，在 React 应用中管理脚本加载可能会变得复杂。useScript 钩子提供了一种优雅的方式来处理外部脚本的加载、错误处理和清理，使得在 Rea…...
跨域问题和解决方案
跨域问题及解决方案 同源策略及跨域问题 同源策略是一套浏览器安全机制，当一个源的文档和脚本，与另一个源的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。 简单来说，同源策略对 同源资源 放行，对 异源…...
springboot中路径默认配置与重定向/转发所存在的域对象
Spring Boot 是一种简化 Spring 应用开发的框架，它提供了多种默认配置和方便的开发特性。在 Web 开发中，路径配置和请求的重定向/转发是常见操作。本文将详细介绍 Spring Boot 中的路径默认配置，并解释重定向和转发过程中存在的域对象。 一、…...
【OS】AUTOSAR架构下的Interrupt详解（下篇）
目录 3.代码分析 3.1中断配置代码 3.2 OS如何找到中断处理函数 3.3 Os_InitialEnableInterruptSources实现 3.4 Os_EnableInterruptSource 3.5 DisableAllInterrupts 3.5.1Os_IntSuspendCat1 3.5.2 Os_InterruptDisableAllEnter 3.5.3 Disable二类中断 3.5.4 Disable一…...
基于遗传算法的256QAM星座图的最优概率整形matlab仿真,对比优化前后整形星座图和误码率
目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下（完整代码运行后无水印）： GA优化曲线： 优化前后星座图对比 优化前后误码率对比 仿真操作步骤…...
Android学习21 -- launcher
1 前言 之前在工作中，第一次听到launcher有点蒙圈，不知道是啥，当时还赶鸭子上架去和客户PK launcher的事。后来才知道其实就是安卓的桌面。本来还以为很复杂，毕竟之前接触过windows的桌面，那叫一个复杂。。。 后面查了…...
小程序越来越智能化，作为设计师要如何进行创新设计
一、用户体验至上 （一）简洁高效的界面设计 小程序的特点之一是轻便快捷，用户期望能够在最短的时间内找到所需功能并完成操作。因此，设计师应致力于打造简洁高效的界面。避免过多的装饰元素和复杂的布局，采用清晰的导航…...
【实践案例】基于大语言模型的海龟汤游戏
文章目录 项目背景提示词构建海龟汤主持人真相判断专家 具体实现流程文心一言大语言模型“海龟汤”插件参考 项目背景 “海龟汤”作为一种聚会类桌游，又称情境推理游戏，是一种猜测情境还原事件真相的智力游戏。其玩法是由出题者提出一个难以理解的事件&…...
基于多智能体强化学习的医疗AI中RAG系统程序架构优化研究
一、引言 1.1 研究背景与意义 在数智化医疗飞速发展的当下，医疗人工智能（AI）已成为提升医疗服务质量、优化医疗流程以及推动医学研究进步的关键力量。医疗 AI 借助机器学习、深度学习等先进技术，能够处理和分析海量的医疗数据，从而辅助医生进行疾病诊断、制定治疗方案以…...
【Unity2D 2022：UI】创建滚动视图
一、创建Scroll View游戏对象 在Canvas画布下新建Scroll View游戏对象 二、为Content游戏对象添加Grid Layout Group（网格布局组）组件 选中Content游戏物体，点击Add Competent添加组件，搜索Grid Layout Group组件 三、调整Grid La…...
C++ Primer 多维数组
欢迎阅读我的 【CPrimer】专栏 专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...
怀旧经典：1200+款红白机游戏合集，Windows版一键畅玩
沉浸在怀旧的海洋中，体验经典红白机游戏的魅力！我们为您精心准备了超过1200款经典游戏的合集，每一款都是时代的印记，每一场都是回忆的旅程。这个合集不仅包含了丰富的游戏资源，还内置了多个Windows版的NES模拟器&…...
【数据采集】案例02：基于Selenium采集豆瓣电影Top250的详细数据
基于Selenium采集豆瓣电影Top250的详细数据 Selenium官网：https://www.selenium.dev/blog/ 豆瓣电影Top250官网：https://movie.douban.com/top250 写在前面 实验目标：基于Selenium框架采集豆瓣电影Top250的详细数据。 电脑系统：Windows 使用软件：PyCharm、Navicat 技术需求…...
Spring 面试题【每日20道】【其二】
1、Spring MVC 具体的工作原理？ 中等 Spring MVC 是 Spring 框架的一部分，专门用于构建基于Java的Web应用程序。它采用模型-视图-控制器（MVC）架构模式，有助于分离应用程序的不同方面，如输入逻辑、业务逻辑…...
算法设计-0-1背包动态规划（C++）
一、问题阐述 0-1 背包问题的目标是在给定背包容量 W 的情况下，从 n 个物品中选择一些物品放入背包，使得背包中物品的总价值最大。每个物品只能选择一次（即要么放入背包，要么不放入）。 二、代码 #include <iostr…...
【Java知识】使用Java实现地址逆向解析到区划信息
文章目录 1. 实现 FST1.1 定义 FST 节点1.2 定义 FST 2. 实现地址逆向查询2.1 定义区划信息2.2 构建 FST 3. 运行结果4. 代码说明5. 进一步优化6. 总结 实现一个 FST（Finite State Transducer，有限状态转换器） 并用于 地址逆向查询区划信息…...
单机伪分布Hadoop详细配置
目录 1. 引言2. 配置单机Hadoop2.1 下载并解压JDK1.8、Hadoop3.3.62.2 配置环境变量2.3 验证JDK、Hadoop配置 3. 伪分布Hadoop3.1 配置ssh免密码登录3.2 配置伪分布Hadoop3.2.1 修改hadoop-env.sh3.2.2 修改core-site.xml3.2.3 修改hdfs-site.xml3.2.4 修改yarn-site.xml3.2.5 …...
[250204] Mistral Small 3：小巧、快速、强大 | asdf 0.16.0 发布：Golang 重写带来性能飞跃
目录 Mistral AI 发布开源模型 Mistral Small 3：小巧、快速、强大asdf 0.16.0 版本发布：Golang 重写带来性能飞跃！ Mistral AI 发布开源模型 Mistral Small 3：小巧、快速、强大 法国人工智能初创公司 Mistral AI 发布了最新的开源…...
解读“大语言模型（LLM）安全性测评基准”
1. 引入 OWASP，全称为Open Web Application Security Project，即开放式Web应用程序安全项目，是一个致力于提高软件安全性的非营利国际组织。 由于庞大的规模和复杂的结构，大语言模型也存在多种安全风险，如prompt误导…...
可视化相机pose colmap形式的相机内参外参
目录 内参外参转换 可视化相机pose colmap形式的相机内参外参 内参外参转换 def visualize_cameras(cameras, images):fig plt.figure()ax fig.add_subplot(111, projection3d)for image_id, image_data in images.items():qvec image_data[qvec]tvec image_data[tvec]#…...
从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架（基础图形库实现）
目录 基础图形库的抽象 抽象图形 抽象点 设计我们的抽象 实现我们的抽象 测试 抽象线 设计我们的抽象 实现我们的抽象 绘制垂直的和水平的线 使用Bresenham算法完成任意斜率的绘制 绘制三角形和矩形 矩形 三角形 实现 绘制圆，圆弧和椭圆 继续我们的…...
函数实现最佳图像匹配)
python学opencv|读取图像（五十三）原理探索：使用cv.matchTemplate()函数实现最佳图像匹配
【1】引言 前序学习进程中，已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧，并且成功对两个目标进行了匹配。 相关文章链接为：python学opencv|读取图像（五十二）使用cv.matchTemplate()函数实现最佳图像…...
4 前端前置技术（上）：AJAX技术（前端发送请求）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 前言...
python的ruff简单使用
Ruff 是一个用 Rust 编写的高性能 Python 静态分析工具和代码格式化工具。它旨在提供快速的代码检查和格式化功能，同时支持丰富的配置选项和与现有工具的兼容性。ruff是用rust实现的python Linter&Formatter。 安装： conda install -c conda-forge…...
windows环境下如何在PyCharm中安装软件包
windows环境下如何在pyCharm中安装wxPython软件包 在windows环境中，安装软件包可以使用 终端 的方式，在IDE下方的终端中执行pip install wxPython进行安装，安装完毕之后，使用pip show wxPython检查也符合预期。 但是在代码文件中导…...
用llama-index搭建AI Agent)
【LLM-agent】(task2)用llama-index搭建AI Agent
note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool，循环执行：推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词，工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…...
Deep Crossing：深度交叉网络在推荐系统中的应用
实验和完整代码 完整代码实现和jupyter运行：https://github.com/Myolive-Lin/RecSys--deep-learning-recommendation-system/tree/main 引言 在机器学习和深度学习领域，特征工程一直是一个关键步骤，尤其是对于大规模的推荐系统和广告点击率预…...
介绍一下Mybatis的Executor执行器
Executor执行器是用来执行我们的具体的SQL操作的 有三种基本的Executor执行器： SimpleExecutor简单执行器 每执行一次update或select，就创建一个Statement对象，用完立刻关闭Statement对象 ReuseExecutor可重用执行器 可重复利用Statement…...
pthread_cond_broadcast的概念和使用案例
pthread_cond_broadcast 是 POSIX 线程（Pthreads）库中用于条件变量（Condition Variable）操作的函数，定义在 <pthread.h> 头文件中。它的核心作用是唤醒所有等待在某个条件变量上的线程，通常用于多线程…...
数据中心服务器对PCIe测试的需求、挑战和应用
人工智能和机器学习技术的迅猛发展，尤其是大语言模型（LLM）的兴起，对计算资源和数据传输速度提出了更高的要求，从而激发了对更高带宽解决方案的迫切需求。PCIe作为数据中心服务器间互联的主力军，承担着高速数…...
)
SpringBoot的配置(配置文件、加载顺序、配置原理)
文章目录 SpringBoot的配置(配置文件、加载顺序、配置原理)一、引言二、配置文件1、配置文件的类型1.1、配置文件的使用 2、多环境配置 三、加载顺序四、配置原理五、使用示例1、配置文件2、配置类3、控制器 六、总结 SpringBoot的配置(配置文件、加载顺序、配置原理) 一、引言…...
利用Vue和javascript分别编写一个“Hello World”的定时更新
目录 一、利用Vue编写一个“Hello World”的定时更新（1）vue编码在Html文件中（2）vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 （1ÿ…...
【免费】2007-2019年各省科技支出占一般公共预算支出的比重数据
2007-2019年各省科技支出占一般公共预算支出的比重数据 1、时间：2007-2019年 2、来源：国家统计局、统计年鉴 3、指标：行政区划代码、地区名称、年份、科技支出占一般公共预算支出的比重 4、范围：31省 5、指标解释：…...
解决 LeetCode 922 题：按奇偶排序数组 II
解决 LeetCode 922 题：按奇偶排序数组 II 题目描述 给定一个非负整数数组 nums，其中一半整数是奇数，一半整数是偶数。要求对数组进行排序，以便当 nums[i] 为奇数时，i 也是奇数；当 nums[i] 为偶数时&#…...
【PyQt】getattr动态访问对象的属性
问题 使用qtdesigner设计好大体的软件结构，需要使用代码进行批量修改控件样式,self.ui.x 会被解释为访问 self.ui 中名为 x 的属性，而不是将 x 作为变量名来解析，此时需要通过字符串动态访问 self.ui 中的按钮对象 for i in range(20):x f…...
基于RTOS的STM32游戏机
1.游戏机的主要功能 所有游戏都来着B站JL单片机博主开源 这款游戏机具备存档与继续游戏功能，允许玩家在任何时候退出当前游戏并保存进度，以便日后随时并继续之前的冒险。不仅如此，游戏机还支持多任务处理，玩家可以在退出当前游戏…...
＜ 自用文儿 ＞ 下载 MaxMind GeoIP Databases 对攻击的 IP 做 地理分析
起因 两个 VPM/VPS，安装了 fail2ban 去拦截密码穷举攻击。每天的记录都在增长，以前复制屏幕输出就行，一屏的内容还容易粘贴出来的。昨天已经过 500 条，好奇 fail2ban 是如何存储这些内容的？就发现它在使用 SQLite3 数…...
kubernetes 核心技术-集群安全机制 RBAC
随着 Kubernetes 在企业级应用中的广泛采用，确保集群的安全性变得至关重要。Kubernetes 提供了多种安全机制来保护集群及其资源免受未授权访问和潜在威胁的影响。其中，基于角色的访问控制（Role-Based Access Control, 简称 RBAC）是…...
排序算法--快速排序
快速排序是高效的排序算法，平均时间复杂度为 O(nlogn)，适合大规模数据排序。 1.挖坑法 2左右指针法 3.前后指针法 // 交换两个元素的值 void swap(int* a, int* b) {int temp *a;*a *b;*b temp; }// 分区函数，返回分区点的索引 int par…...
npm知识
npm 是什么 npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个包（package）（即，代码模块）。来自…...
雷电等基于VirtualBox的Android模拟器映射串口和测试CSerialPort串口功能
雷电等基于VirtualBox的Android模拟器映射串口和测试CSerialPort串口功能 1. 修改VirtualBox配置文件映射串口 模拟器配置文件vms/leidian0/leidian.vbox。 在UART标签下增加(修改完成后需要将leidian.vbox修改为只读) <Port slot"1" enabled"true"…...
http请求中的headers和body内容设置
1.headers 1.1 内容相关 headers {Content-Type: application/json, # 或 application/x-www-form-urlencoded, multipart/form-dataContent-Length: 1234, # 内容长度Accept: application/json, # 期望的返回格式Accept-Encoding: gzip, deflate, # 支持的压缩方式Acce…...
Python语言的安全开发
Python语言的安全开发 引言 在信息技术迅速发展的今天，网络安全问题愈发凸显。随着Python语言的广泛应用，尤其是在数据分析、人工智能、Web开发等领域，其安全问题越来越受到重视。Python作为一门高效且易于学习的编程语言，虽然在…...
[LeetCode]day13 19.删除链表的倒数第n个结点
19. 删除链表的倒数第 N 个结点 - 力扣（LeetCode） 题目描述 给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。 示例 1： 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5]示例 2&a…...
进程的环境变量
export MUDUO_LOG_DEBUG1 ./testif (::getenv("MUDUO_LOG_TRACE"))return true;有时在程序运行前，我们希望设置环境变量。此处::表示全局命名空间。 在类 Unix 系统（如 Linux、macOS）中，环境变量并不直接存储在堆、栈或…...
《深度揭秘LDA：开启人工智能降维与分类优化的大门》
在当今人工智能蓬勃发展的时代，数据成为了驱动技术进步的核心要素。随着数据采集和存储技术的飞速发展，我们所面临的数据量不仅日益庞大，其维度也愈发复杂。高维数据虽然蕴含着丰富的信息，但却给机器学习算法带来了一系列严峻的挑…...
UE编辑器工具
如何自己制作UE小工具提高工作效率 在虚幻编辑器用户界面中，可以使用各种各样的可视化工具来设置项目，设计和构建关卡，创建游戏性交互等等。但有些时候，当你确定了需要编辑器执行的操作后，可能想要通过编程方式调用它…...
.找到字符串中所有字母异位词（滑动窗口）
给定两个字符串 s 和 p，找到 s 中所有 p 的 异位词 的子串，返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cba", 它是 "…...
力扣 121. 买卖股票的最佳时机
🔗 https://leetcode.cn/problems/best-time-to-buy-and-sell-stock 题目 nums 表示连续几天的股票价格，返回最大利润 思路 贪心，模拟 代码 class Solution { public:int maxProfit(vector<int>& prices) {int ans 0;int mi…...
c++ 冒泡排序
c 冒泡排序 冒泡排序是一种简单的排序算法，它通过重复遍历待排序的数列，比较每对相邻元素的大小，并在必要时交换它们的位置。这个过程会一直进行，直到没有需要交换的元素为止，这意味着数列已经排序完成。以下是用C实现…...