【八股系列】介绍React高阶组件,适用于什么场景?

文章目录

  • 1. HOC的工作原理
  • 2. 返回的新组件
  • 3. 适用场景
  • 4. 注意事项
  • 5. 示例代码

React高阶组件( Higher-Order Components,简称HOC)是 React中一种高级的 复用组件逻辑的技术。 HOC自身不是 React API的一部分,而是基于 React的组合性质( Composition)发展出来的一种编程模式。它是一个 接受组件作为参数并返回一个新的组件的函数

1. HOC的工作原理

HOC通过接收一个组件作为参数,可以对其进行以下操作:

  • 修改传入组件的props
  • 包装传入组件,提供额外的UI或行为
  • 处理状态或生命周期方法
  • 添加副作用,如订阅或日志记录

2. 返回的新组件

返回的新组件通常基于原组件进行了某种增强,比如添加了新的功能、进行了性能优化实现了复用的逻辑,而无需修改原组件的代码。

3. 适用场景

  • 复用组件逻辑:当多个组件需要共享某些功能时(如数据获取、权限验证、UI主题切换),可以通过HOC封装这些通用逻辑,减少代码重复。

  • 状态管理:结合Redux或其他状态管理库时,HOC可以用来连接组件到store,使得组件能够访问全局状态。

  • 权限控制:实现用户权限验证,只有满足特定条件的用户才能看到或操作组件内容。

  • 性能优化:通过实现shouldComponentUpdate生命周期方法或使用React.memo等手段,HOC可以帮助提升组件的渲染性能。

  • 布局与样式封装:统一处理页面布局或应用全局样式,如在组件外部添加固定的页头和页脚。

  • 数据操作:在组件渲染之前对数据进行预处理,如过滤、排序或格式化数据。

4. 注意事项

  • HOC应当遵循纯函数的原则,即对于相同的输入始终产生相同的输出,不引起副作用。
  • 使用HOC时应注意不要过度封装,以免造成组件层级过深,难以理解和维护。
  • 随着ReactHooks的普及,某些HOC的使用场景可以用自定义Hook替代,以获得更清晰的逻辑和更好的可读性。

5. 示例代码

下面是一个React高阶组件(HOC)的基本代码示例。HOC通过对布尔值的处理来决定是否渲染被包装的组件。

// withAuthentication.tsx
import React from 'react';// 定义withAuthentication高阶组件
const withAuthentication = (WrappedComponent: React.ComponentType<any>) => {// 返回一个新的组件return class extends React.Component<any> {render() {// 确保isAuthorized是从props接收的const { isAuthorized } = this.props;// 根据isAuthorized的值决定是否渲染WrappedComponentreturn isAuthorized ? <WrappedComponent {...this.props} /> : <div>Unauthorized</div>;}};
};export default withAuthentication;
// MyProtectedComponent.tsx
import React from 'react';
import withAuthentication from './withAuthentication';// 一个简单的受保护的组件示例
class MyProtectedComponent extends React.Component {render() {return <div>Welcome to the protected content!</div>;}
}// 使用withAuthentication装饰MyProtectedComponent
const ProtectedComponent = withAuthentication(MyProtectedComponent);// 渲染ProtectedComponent,并传递isAuthorized为props
export default function AuthenticatedProtectedComponent() {return <ProtectedComponent isAuthorized={true} />;
}
// App.tsx
import React from "react";
import "./App.css";
......
import MyProtectedComponent from "./page/HOC/MyProtectedComponent";function App() {return (<div className="App">......<div className="App-item">测试高阶组件:<MyProtectedComponent /></div></div>);
}export default App;

在这里插入图片描述

withAuthentication是一个HOC,它接收一个组件作为参数,并返回一个新的组件,该组件在渲染时会检查isAuthorized属性来决定是否显示被包裹的组件。MyProtectedComponent是一个简单的组件,用作演示如何使用这个HOC来控制访问权限。最后,在App组件中,通过<ProtectedComponent isAuthorized={true} />来使用这个受保护的组件,并明确指定了isAuthorizedtrue来允许渲染。可以根据实际情况调整isAuthorized的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何优化频繁的v-if造成的页面卡顿

如何优化频繁的v-if造成的页面卡顿&#xff0c;只能用v-if 优化 1.将频繁的v-if转化为v-show&#xff1a;v-show与v-if有所不同。v-show会一直存在&#xff0c;只是CSS属性display被动态控制&#xff0c;而v-if则会根据条件在DOM中添加或移除元素。如果v-if出现频繁&#xff0c…

为何云原生是未来?企业IT架构的颠覆与重构(上)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、什么是云原生 2、云原生的背景和起源 背景 起源 关…

Android 查询及获取应用程序 Package 及 Acticity 名称的方法

一、通过命令查询和获取应用的Package及Acticity &#xff08;一&#xff09;通过命令查询应用包名及安装信息 以下是常用命令&#xff1a; 命令形式作用adb shell pm list packages查询系统中所有应用的包名adb shell pm list packages -s查询系统应用包名adb shell pm lis…

vue实现点击元素跳转至另一个网站

在 Vue 中&#xff0c;要实现点击一个元素并触发函数跳转到另一个网站的功能&#xff0c;你可以直接在元素的点击事件处理程序中调用 window.location.href 来设置新的 URL。但如果你确实需要在点击事件中先执行一些逻辑&#xff08;例如发送请求、修改状态等&#xff09;&…

19、架构-虚拟化容器

概述 本文讲解虚拟化容器技术的发展及其在现代计算架构中的应用。内容分为三个主要部分&#xff1a;容器的崛起、以容器构建系统、以应用为中心的封装。以下是对每个知识点的详细描述。 1、 容器的崛起 容器技术的快速发展和广泛应用为软件开发和运维带来了巨大的变革。以下…

前端性能优化篇之webpack如何提⾼的打包速度、如何减少打包体积、如何⽤来优化前端性能、如何提⾼构建速度?

目录 如何提⾼webpack的打包速度?1. 使用最新版本的Webpack和相关插件&#xff1a;2. 合理配置Loader&#xff1a;3. 使用HappyPack或thread-loader&#xff1a;4. 使用DllPlugin预编译依赖模块&#xff1a;5. 使用Tree Shaking&#xff1a;6. 使用缓存&#xff1a;7. Code Sp…

MySQL 函数

1、CURDATE()&#xff1a;返回当前的日期。 2、查询当前年月 SELECT DATE_FORMAT(CURDATE(),%Y-%m) AS year_month 3、当前日期添加 1 个月 INTERVAL 1 MONTH 4、查询近6个月的月份 SELECT DATE_FORMAT(CURDATE(),%Y-%m)AS year_month UNION SELECT DATE_FORMAT((CURDAT…

【网络安全学习】使用Kali做信息收集 -03- <综合侦察>

综合侦察涉及从多个来源收集和分析目标的信息&#xff0c;以了解其背景、特征、潜在漏洞和风险。 下面介绍一些在Kali中常用的综合侦察工具。 1.Dmitry 它是一个命令行工具&#xff0c;可以使用不同的选项来收集目标的各种信息。 Dmitry可以与whois服务和Netcraft服务结合使…

【启明智显产品介绍】Model4 工业级HMI芯片详解系列专题(一):芯片性能

Model4 工业级HMI芯片详解系列专题&#xff08;一&#xff09;【芯片性能】 Model4系列工业级MPU是国产自主面向工业应用的RISC-V架构的应用级芯片&#xff0c;内置玄铁64bit RISC-V CPU C906&#xff0c;主频高达600MHz&#xff0c;算力约1380DMIPS。 Model4系列工业级MPU具…

层次越高的人,越“冷漠”?

层次越高的人越冷漠。 人际关系无疑是我们生活中很重要的一部分。 我们生来渴望连接和互动&#xff0c;但这种渴望有时会让我们忘记自己的需求和边界。 我们可能会牺牲掉自己的时间&#xff0c;经历和情感迎合别人&#xff0c;以求得到认可和爱。 然而&#xff0c;当我们在人际…

HTML5 Web Workers: 异步编程的强大力量

在现代Web开发中&#xff0c;随着应用程序变得越来越复杂&#xff0c;用户界面的流畅性和响应性成为了决定用户体验好坏的关键因素之一。传统的JavaScript执行模型中&#xff0c;所有脚本都在同一个线程上运行&#xff0c;这意味着复杂的计算任务会阻塞UI更新&#xff0c;导致页…

BizDevOps全局建设思路:横向串联,纵向深化

本文来自腾讯蓝鲸智云社区用户&#xff1a;CanWay BizDevOps概述 IT技术交付实践方法在不断迭代中持续优化。在工业化时代&#xff0c;Biz&#xff08;业务&#xff09;、Dev&#xff08;开发&#xff09;、Ops&#xff08;运维&#xff09;三者往往相对分离&#xff0c;甚至有…

Transformer预测 | 基于Transformer+LSTM股票价格预测时间序列预测(Pytorch)

效果一览 基本介绍 股票行情是引导交易市场变化的一大重要因素,若能够掌握股票行情的走势,则对于个人和企业的投资都有巨大的帮助。然而,股票走势会受到多方因素的影响,因此难以从影响因素入手定量地进行衡量。但如今,借助于机器学习,可以通过搭建网络,学习一定规模的股…

Tailwindcss Hover, Focus, Other States (悬停、聚焦和其他状态) Limitations

Tailwindcss Hover, Focus, & Other States (悬停、聚焦和其他状态) Limitations 背景 项目代码有需求是仅在hover状态下显示滚动条&#xff0c;在集成css之前的做法是定义一个css类&#xff0c;编写类的样式如下 .container {height: 300px;overflow-y: hidden; }.cont…

技术专家篇:深入理解Spring Boot配置类中List<Bean>参数的应用

例如 Configuration ConditionalOnClass(LoginUser.class) public class DataPermissionAutoConfiguration {BeanConditionalOnBean(value { PermissionApi.class, DeptDataPermissionRuleCustomizer.class })public DeptDataPermissionRule deptDataPermissionRule(Permissi…

API-操作元素内容

学习目标&#xff1a; 掌握操作元素内容 学习内容&#xff1a; 操作元素内容元素innerText属性元素innerHTML属性案例 操作元素内容&#xff1a; DOM对象都是根据标签生成的&#xff0c;所以操作标签&#xff0c;本质上就是操作DOM对象。就是操作对象使用的点语法。如果想要修…

Table 宽度超出页面宽度时,出现滚动条,单元格内容不换行实

修改前 方法 <div styleoverflow:auto><table stylewhite-space: nowrap></table> </div>修改后

@pytest.fixture与@pytest.mark.parametrize结合实现参数化

背景&#xff1a;测试数据既要在fixture方法中使用&#xff0c;同时也在测试用例中使用 使用方法&#xff1a;在使用parametrize的时候添加"indirectTrue"参数。pytest可以实现将参数传到fixture方法中&#xff0c;也可以在当前测试用例中使用。 原理&#xff1a;参…

推荐一个github项目

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未经许可禁止转载&#xff0…

Harbor本地仓库搭建003_Harbor常见错误解决_以及各功能使用介绍_镜像推送和拉取---分布式云原生部署架构搭建003

首先我们去登录一下harbor,但是可以看到,用户名密码没有错,但是登录不上去 是因为,我们用了负债均衡,nginx会把,负载均衡进行,随机分配,访问的 是harbora,还是harborb机器. loadbalancer中 解决方案,去loadbalance那个机器中,然后 这里就是25机器,我们登录25机器 然后去配置…