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

React 多个 HOC 嵌套太深，会带来哪些隐患？

news 来源：原创 2025/8/23 23:11:52

在 React 中，使用多个 高阶组件（HOC，Higher-Order Component） 可能会导致组件层级变深，这可能会带来以下几个影响：

一、带来的影响

1、调试困难

由于组件被多个 HOC 包裹，React 开发者工具（React DevTools）中可能会显示大量嵌套的 HOC，难以直观地找到具体的逻辑组件。

例如：

jsx
复制编辑
const EnhancedComponent = withAuth(withLogger(withTheme(MyComponent)));

React DevTools 可能会显示：

markdown
复制编辑
withAuthwithLoggerwithThemeMyComponent

这会增加调试的复杂性。

2、影响性能

每个 HOC 都会创建一个新的组件实例，并可能触发额外的 render，导致 渲染性能下降。
例如，假设每个 HOC 都在 componentDidUpdate 里执行 console.log()，那么组件的每次更新都会执行 多个额外的计算，不必要的 re-render 可能会影响应用的流畅性。

3、影响 `ref` 传递

由于 HOC 会返回一个新组件，默认情况下，ref 不会自动透传 给被包裹的原始组件。
需要使用 React.forwardRef() 手动透传 ref，否则父组件传递的 ref 可能指向 HOC 而不是实际的 DOM 元素。

解决方案：

jsx
复制编辑
const withLogger = (WrappedComponent) => {const HOC = React.forwardRef((props, ref) => {return <WrappedComponent {...props} ref={ref} />;});return HOC;
};

4、可能导致 `props` 透传问题

如果 HOC 没有正确传递 props，内部组件可能会丢失部分 props。

例如：

jsx
复制编辑
const withLogger = (WrappedComponent) => {return (props) => {console.log('Props:', props);return <WrappedComponent />;};
};

这里 props 没有正确传递，导致 WrappedComponent 可能接收不到 props，最终页面可能出现异常。

正确方式：

jsx
复制编辑
const withLogger = (WrappedComponent) => {return (props) => {console.log('Props:', props);return <WrappedComponent {...props} />;};
};

5、React 18 并发模式 & HOC

HOC 可能导致不必要的副作用：
- React 18 启用了并发模式后，useEffect 可能会在组件 挂载时运行两次（严格模式）。
- 如果多个 HOC 叠加，可能会出现额外的副作用，如多次请求 API、多次订阅事件等。

二、解决方案（HOC 的替代方案）

React 16.8 以后，官方推荐使用 Hooks 代替 HOC，以避免上面的问题：

1、用 `useContext` 替代全局状态管理的 HOC

```
jsx
复制编辑
const ThemeContext = React.createContext();function useTheme() {return useContext(ThemeContext);
}
```

2、用 `useEffect` 处理生命周期逻辑

```
jsx
复制编辑
function useLogger(componentName) {useEffect(() => {console.log(`${componentName} 渲染了`);}, []);
}
```

3、用 `useRef` 代替 `forwardRef`

```
jsx
复制编辑
function MyComponent() {const inputRef = useRef();useEffect(() => inputRef.current.focus(), []);return <input ref={inputRef} />;
}
```

4、使用 `compose` 组合多个 HOC

```
jsx
复制编辑
import { compose } from 'recompose';const EnhancedComponent = compose(withAuth,withLogger,withTheme
)(MyComponent);
````compose` **从右向左执行 HOC**，避免嵌套过深。

使用 Hooks 替代 HOC

HOC 主要用于 逻辑复用，但在 React Hooks 出现后，自定义 Hook 是更优雅的方式。

例如：

jsx
复制编辑
function useAuth() {const [isAuthenticated, setAuthenticated] = useState(false);return { isAuthenticated, setAuthenticated };
}function MyComponent() {const { isAuthenticated } = useAuth();return <div>{isAuthenticated ? 'Logged In' : 'Logged Out'}</div>;
}

优势：
- 避免了 HOC 过深的组件层级
- 更符合 React 16.8+ 的 Hooks 方式
- 更容易调试和复用

三、总结

影响	详细说明	解决方案
调试困难	HOC 层级深，DevTools 组件层级复杂	`compose` 组合多个 HOC
性能下降	额外的 `render`，增加不必要的计算	避免不必要的 `re-render`，使用 `memo`
`ref` 透传问题	默认情况下 `ref` 不会传递	使用 `React.forwardRef`
`props` 透传问题	HOC 没有正确传递 `props`	确保 `...props` 透传
React 18 并发模式影响	HOC 可能导致 `useEffect` 副作用触发多次	Hooks 替代 HOC

如果项目是基于 React 16.8+，推荐使用 Hooks 代替 HOC，以减少组件层级，提高代码可读性和性能！

React 多个 HOC 嵌套太深，会带来哪些隐患？

在 React 中，使用多个高阶组件（HOC，Higher-Order Component） 可能会导致组件层级变深，这可能会带来以下几个影响： 一、带来的影响 1、调试困难由于组件被多个 HOC 包裹，React 开发者工具&am…...

编程日记 2025/8/23 23:11:52

企业工厂生产线马达保护装置功能参数介绍

安科瑞刘鸿鹏摘要工业生产中，电压暂降（晃电）是导致电动机停机、生产中断的主要原因之一，给企业带来巨大的经济损失。本文以安科瑞晃电再起动控制器为例，探讨抗晃电保护器在生产型企业工厂中的应用，分析…...

编程日记 2025/8/20 22:52:56

Redis 的五种数据类型面试回答

这里简单介绍一下面试回答、我之前有详细的去学习、但是一直都觉得太多内容了、太深入了然后面试的时候不知道从哪里讲起、于是我写了这篇CSDN帮助大家面试回答、具体的深入解析下次再说面试官你好我来介绍一下Redis的五种基本数据类型有String List Set ZSet Map 五种基…...

编程日记 2025/8/23 23:09:41

多线程代码案例（定时器） - 3

定时器，是我们日常开发所常用的组件工具，类似于闹钟，设定一个时间，当时间到了之后，定时器可以自动的去执行某个逻辑目录 Timer 的基本使用实现一个 Timer 通过这个类，来描述一个任务通过这个类&…...

编程日记 2025/8/21 5:11:36

基于大模型的GCSE预测与治疗优化系统技术方案

目录技术方案文档：基于大模型的GCSE预测与治疗优化系统1. 数据预处理模块功能：整合多模态数据（EEG、MRI、临床指标等），标准化并生成训练集。伪代码流程图2. 大模型架构（Transformer-GNN混合模型）功能：联合建模时序信号（EEG）与空间结构（脑网络）。伪代码流程图3. 术…...

编程日记 2025/8/23 21:18:47

IntelliJ IDEA 中 Continue 插件使用 DeepSeek-R1 模型指南

IntelliJ IDEA 中 Continue 插件使用 DeepSeek-R1 模型指南 Continue 是一款开源的 AI 编码助手插件，支持 IntelliJ IDEA 等 JetBrains 系列 IDE。它可以通过连接多种语言模型（如 DeepSeek-R1）提供实时代码生成、问题解答和单元测试生成等功…...

编程日记 2025/8/23 17:42:59

Valgrind——内存调试和性能分析工具

文章目录一、Valgrind 介绍二、Valgrind 功能和使用1. 主要功能2. 基本用法2.1 常用选项2.2 内存泄漏检测2.3 详细报告2.4 性能分析2.5 多线程错误检测三、在 Ubuntu 上安装 Valgrind四、示例1. 检测内存泄漏2. 使用未初始化的内存3. 内存读写越界4. 综合错误五、工具集1. M…...

编程日记 2025/8/19 6:09:39

京东API智能风控引擎：基于行为分析识别恶意爬虫与异常调用

京东 API 智能风控引擎基于行为分析识别恶意爬虫与异常调用，主要通过以下几种方式实现： 行为特征分析请求频率：正常用户对 API 的调用频率相对稳定，受到网络延迟、操作速度等因素限制。若发现某个 IP 地址或用户在短时间内对同一…...

编程日记 2025/8/20 20:56:33

Swift 解 LeetCode 250：搞懂同值子树，用递归写出权限系统检查器

文章目录前言问题描述简单说：痛点分析：到底难在哪？1. 子树的概念搞不清楚2. 要不要“递归”？递归从哪开始？3. 怎么“边遍历边判断”？这套路不熟后序遍历全局计数器遍历过程解释一下：和实际场…...

编程日记 2025/8/22 4:24:10

Nginx搭建API网关服务教程-系统架构优化 API统一管理

超实用！用Nginx搭建API网关服务，让你的系统架构更稳更强大！🚀 亲们，今天来给大家种草一个超级实用的API网关搭建方案啦！👀 在如今的Web系统架构中，一个稳定、高性能、可扩展的API网…...

编程日记 2025/8/23 15:06:04

SQL2API是什么？SQL2API与BI为何对数据仓库至关重要？

目录一、SQL2API是什么？ 二、SQL2API的历史演变：从数据共享到服务化革命 1990年代：萌芽于数据仓库的数据共享需求 2010年代初：数据中台推动服务化浪潮 2022年左右：DaaS平台的兴起 2025年代：麦聪定义…...

编程日记 2025/8/20 1:53:11

CentOS 7无法上网问题解决

CentOS 7无法上网问题解决问题配置了桥接模式以后，能够ping通本地IP但是无法ping通www.baidu.com 这里的前提是VWare上已经对虚拟机桥接模式网卡做了正确的选择，比如我现在选择的就是当前能够上外网的网卡： 问题根因 DNS未正确配置。…...

编程日记 2025/8/17 23:49:15

优化 Web 性能：使用 WebP 图片（Uses WebP Images）

在 Web 开发中，图片资源的优化是提升页面加载速度和用户体验的关键。Google 的 Lighthouse 工具在性能审计中特别推荐“使用 WebP 图片”（Uses WebP Images），因为 WebP 格式在保持视觉质量的同时显著减少文件大小。本文将基于 Chr…...

编程日记 2025/8/21 15:50:57

-- 普通索引 CREATE INDEX idx_duration ON examination_info(duration);-- 唯一索引 CREATE UNIQUE INDEX uniq_idx_exam_id ON examination_info(exam_id);-- 全文索引 CREATE FULLTEXT INDEX full_idx_tag ON examination_info(tag);描述现有一张试卷信息表examination_in…...

编程日记 2025/8/21 19:04:48

Leetcode - 周赛443

目录一、3502. 到达每个位置的最小费用二、3503. 子字符串连接后的最长回文串 I三、3504. 子字符串连接后的最长回文串 II四、3505. 使 K 个子数组内元素相等的最少操作数一、3502. 到达每个位置的最小费用题目链接本题是一道脑筋急转弯，实际就是计算前缀最小…...

编程日记 2025/8/22 8:25:55

dolphinscheduler单机部署链接oracle

部署成功请给小编一个赞或者收藏激励小编 1、安装准备 JDK版本:1.8或者1.8oracle版本：19Coracle驱动版本：8 2、安装jdk 下载地址：https://www.oracle.com/java/technologies/downloads/#java8 下载后上传到/tmp目录下。然后执行下面命…...

编程日记 2025/8/20 11:25:59

Three.js 系列专题 5：加载外部模型

内容概述 Three.js 支持加载多种 3D 文件格式（如 GLTF、OBJ、FBX），这让开发者可以直接使用专业建模软件（如 Blender、Maya）创建的复杂模型。本专题将重点介绍 GLTF 格式的加载，并调整模型的位置和材质。学习目标理解常见 3D 文件格式及其特点。掌握使用 GLTFLoader 加…...

编程日记 2025/8/22 15:50:05

【C++算法】50.分治_归并_翻转对

文章目录题目链接：题目描述：解法C 算法代码：图解题目链接： 493. 翻转对题目描述： 解法分治策略一：计算当前元素cur1后面，有多少元素的两倍比我cur1小（降序） 利用单…...

编程日记 2025/8/21 12:17:41

观察者模式详解实战

观察者模式深度解析与实战案例一、传统观察者模式痛点分析强制接收所有通知：观察者被迫处理无关事件事件信息不透明：状态变更缺乏上下文信息类型安全缺失：需要手动进行类型判断和转换扩展成本高：新增事件类型需要修改接口 …...

编程日记 2025/8/20 10:23:24

Light RPC：一款轻量高效的Java RPC框架实践指南

Light RPC：一款轻量高效的Java RPC框架实践指南一、框架简介二、快速入门1. 环境准备2. 服务端配置2.1 添加依赖2.2 YAML配置2.3 接口与实现 3. 客户端配置3.1 添加依赖3.2 YAML配置3.3 客户端调用三、核心设计解析四、适用场景与优势对比五、总结一、框架简介 …...

编程日记 2025/8/21 9:29:47

国内MCP资源网站有哪些？MCP工具上哪找？

在人工智能领域，MCP（模型上下文协议）正逐渐成为连接 AI 模型与外部世界的重要桥梁。而AIbase （https://www.aibase.com/zh/repos/topic/mcp）正是探索 MCP 生态的绝佳平台，它为开发者和研究者提供了一个集中…...

编程日记 2025/8/23 1:51:39

在PowerBI中通过比较日期实现累加计算

#表格数据# 日期数量2025/4/712025/4/822025/4/932025/4/1042025/4/1152025/4/1262025/4/1372025/4/1482025/4/1592025/4/16102025/4/1711 #新建计算列# 列 SUMX(FILTER(表格数据,[日期]<EARLIER([日期])),表格数据[数量])...

编程日记 2025/8/22 1:47:03

十四届蓝桥杯Java省赛 B组(持续更新..)

十四届蓝桥杯Java省赛 B组第一题：阶乘求和 📖 📚阶乘求和第二题：幸运数字 📖 📚幸运数字第三题：数组分割 📖 📚数组分割说是考动态规划，但没有用…...

编程日记 2025/8/22 22:05:18

NO.73十六届蓝桥杯备战|搜索算法-剪枝与优化-记忆化搜索|数的划分|小猫爬山|斐波那契数|Function|天下第一|滑雪(C++)

剪枝与优化剪枝，形象得看，就是剪掉搜索树的分⽀，从⽽减⼩搜索树的规模，排除掉搜索树中没有必要的分⽀，优化时间复杂度。在深度优先遍历中，有⼏种常⻅的剪枝⽅法排除等效冗余如果在搜索过程中&#xf…...

编程日记 2025/8/17 23:25:48

深度学习总结（2）

神经网络的数据表示在前面的例子中，我们的数据存储在多维NumPy数组中，也叫作张量（tensor）。一般来说，目前所有机器学习系统都使用张量作为基本数据结构。张量对这个领域非常重要，重要到TensorFlow都以它来命名。究竟什么是张量呢？张量这一概念的核心在于，它是一个数…...

编程日记 2025/8/21 23:35:08

STM32H7 ADC最大速率

STM32H7 ADC最大速率硬件限制封装在手册 AN5354 中说明了不同封装、不同分辨率的最大速率是不一致的； BGA封装的ADC的速度要快于LQFP封装的速度的； 分辨位数越高、转换时间越长，所以ADC的最大采样速率也就最低； ADC通道模…...

编程日记 2025/8/22 19:39:15

MVC模型

MVC模型（Model模型，View视图，Controller控制器） 逻辑执行流程： JSP（View）----》Servlet（Controller）----》service，dao，pojo（Model&a…...

编程日记 2025/8/22 2:28:00

OpenGL ES -＞ SurfaceView + EGL实现立方体纹理贴图+透视效果

XML文件 <?xml version"1.0" encoding"utf-8"?> <com.example.myapplication.MySurfaceView xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"…...

编程日记 2025/8/19 10:20:24

arthas线上不停机修改bug

安装arthas wget https://alibaba.github.io/arthas/arthas-boot.jar启动： java -jar arthas-boot.jar 启动失败使用jps也没查到对应的进程发生错误信息使用进程id启动，报错进程id查看使用命令： ps -ef | grep java 详情&#xf…...

编程日记 2025/8/17 23:30:22

#关于require 与 import 相关了解

📦 require 在前端项目中使用，属于 CommonJS 模块规范的语法，主要用于 Node.js 环境。早期的前端模块打包工具（如 Webpack）会兼容这种写法，但在现代前端项目（如 Vue、React）中&…...

编程日记 2025/8/22 21:13:23

【算法应用】基于融合A星-粒子群算法求解六边形栅格地图路径规划

目录 1.粒子群算法PSO原理2.结果展示3.参考文献4.代码获取 1.粒子群算法PSO原理【智能算法】粒子群算法（PSO）原理及实现六边形栅格地图分析一下地图： 六边形栅格地图上移动可以看做6领域运动，偶数列与奇数列移动方式有所差异…...

编程日记 2025/8/20 11:45:05

【深度学习】【目标检测】【Ultralytics-YOLO系列】YOLOV3源码整体结构解析

【深度学习】【目标检测】【Ultralytics-YOLO系列】YOLOV3源码整体结构解析文章目录【深度学习】【目标检测】【Ultralytics-YOLO系列】YOLOV3源码整体结构解析前言代码结构整体data文件结构模型训练超参数配置文件解析数据集配置文件解析 models文件结构utils文件结构runs文…...

编程日记 2025/8/19 17:48:08

R语言：气象水文领域的数据分析与绘图利器

R 语言是一门由统计学家开发的用于统计计算和作图的语言（a Statistic Language developed for Statistic by Statistician），由 S 语言发展而来，以统计分析功能见长。R 软件是一款集成了数据操作、统计和可视化功能的优秀的开源软…...

编程日记 2025/8/19 18:40:59

R语言空间水文气象数据分析：从插值到动态可视化

一、R简介与R 在气象水文中的应用 R语言与 R软件简介R 在各行业的应用概览R 与其他语言的比较及其在数据分析与作图上的优势 R 在地学中的应用以及R 在气象水文中的应用二、出发之前——用什么来同时记录我们的数据、代码及结果——Rmd与 knitr介绍介绍一种方便的理念——…...

编程日记 2025/8/17 23:37:41

在Unity中实现《幽灵行者》风格的跑酷动作

基础设置角色控制器选择： 使用Character Controller组件或Rigidbody Capsule Collider 推荐使用Character Controller以获得更精确的运动控制输入系统： 使用Unity的新输入系统(Input System Package)处理玩家输入滑铲实现 public class Slide…...

编程日记 2025/8/21 4:32:19

C# Winform 入门（14）之如何使用线程池

什么是线程？ 首先我们要弄明白什么是线程，线程和线程池有啥区别？ C# 多线程应用(同步异步)_c# 异步线程-CSDN博客补充：ManualResetEvent 的使用 ManualResetEvent 是一种线程同步机制，用于控制一个或者多个线程的执…...

编程日记 2025/8/19 16:48:23

I have something to say about Vue Node.js

关于Vue Node.js，我真的说了很多次了，让我难以理解为啥这么粗糙的东西能流行一起。真疯狂的世界。 vue让感觉就像玩猫德一样的，如此的疯狂，天哪。睡觉了 Node.js v13 window7_nodejsv13-CSDN博客...

编程日记 2025/8/23 15:09:00

OpenCV 图形API（17）计算输入矩阵 src 中每个元素的平方根函数sqrt()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 描述计算数组元素的平方根。 cv::gapi::sqrt 函数计算每个输入数组元素的平方根。对于多通道数组，每个通道会独立处理。其精度大约与内置的 …...

编程日记 2025/8/19 2:54:30

题目练习之set的奇妙使用

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…...

编程日记 2025/8/18 0:06:12

基于人工智能的医学影像关联分析：利用潜在空间几何混杂因素校正法|文献速递-深度学习医疗AI最新文献

Title 题目 AI-based association analysis for medical imaging using latent-spacegeometric confounder correction 基于人工智能的医学影像关联分析：利用潜在空间几何混杂因素校正法 01 文献速递介绍人工智能（AI）已成为各个领域的…...

编程日记 2025/8/21 19:23:00

进程的创建态、运行状态和阻塞状态

今天与大家来聊聊进程的三种状态： 1. 创建态当需要创建一个新进程时，系统为该进程分配一个进程控制块 PCB，并为该进程分配内存空间，且装入该进程对应的程序和有关的数据，这时，一个新进程就产生了。 2. …...

编程日记 2025/8/17 22:12:27

科普：GRU、LSTM及RNN

GRU（门控循环单元）、LSTM（长短期记忆网络）、RNN（循环神经网络）均为处理序列数据的神经网络模型，它们之间存在着紧密的联系与明显的差异。我们重点看一下GRU，并比较它们。一、GRU算…...

编程日记 2025/8/22 6:10:12

java+postgresql+swagger-多表关联insert操作(七)

入参为json，然后根据需要对多张表进行操作： 入参格式： [{"custstoreName":"swagger-测试经销商01","customerName":"swagger-测试客户01","propertyNo":"swaggertest01",&quo…...

编程日记 2025/8/20 1:39:35

如何将/dev/ubuntu-vg/lv-data的空间扩展到/dev/ubuntu-vg/ubuntu-lv的空间上

要将 /dev/ubuntu-vg/lv-data 的空间扩展到 /dev/ubuntu-vg/ubuntu-lv 上，实际上是将 lv-data 的空间释放出来，并将其分配给 ubuntu-lv。以下是详细的步骤和操作说明： 已知信息你有两个逻辑卷： /dev/ubuntu-vg/lv-data/dev/ubun…...

编程日记 2025/8/17 22:12:53

No module named ‘keras.engine‘

目录报错代码： tensorflow-gpu安装 2024.01.05 keras和tf版本对应关系： 报错代码： try:from keras.src.engine import base_layer, data_adapterfrom keras.src.engine.training import _disallow_inside_tf_function, _get_verbosity, …...

编程日记 2025/8/21 11:49:46

python应用之使用pdfplumber 解析pdf文件内容

目录标题 1. 通过 pdfplumber.open() 解析复杂PDF：1-2. 报错：V2 ： v3 使用tk 库运行环境准备完整代码保存运行测试步骤方式二：命令行方式（适用于自动化） 测试用例示例常见问题排查1. 无文件选择对话框弹出&…...

编程日记 2025/8/23 7:54:08

【学Rust写CAD】36 颜色插值函数(alpha256.rs补充方法）

源码 pub fn alpha_lerp(self,src: Argb, dst: Argb, clip: u32) -> Argb {self.alpha_mul_256(clip).lerp(src, dst)}这个函数 alpha_lerp 是一个颜色插值（线性插值，lerp）函数，它结合了透明度混合（alpha_mul_256&…...

编程日记 2025/8/23 5:09:20