React@16.x(10)HOC高阶组件和横切关注点

目录

  • 1,什么是HOC
  • 2,什么是横切关注点
    • 2.1,简单理解
    • 2.2,常见解决方式
  • 3,HOC 举例
    • 3.1,全局功能
    • 3.2,小范围使用
  • 4,HOC 使用注意点
    • 4.1,不要在 render 中使用
    • 4.2,不要在高阶组件内部修改传入的组件
    • 4.3,只做一件事

1,什么是HOC

  • HOF:Heighter-Order Function。高阶函数,以函数为参数并返回一个函数。
  • HOC:Higher-Order Components。高阶组件,以组件为参数并返回一个组件。

2,什么是横切关注点

2.1,简单理解

在系统中横跨了多个模块或组件的,需要考虑的一些特定逻辑或领域(关注点)。它们和业务逻辑相独立,但在系统中多个部分重复出现。

这些关注点,都属于辅助功能,服务于核心功能–>业务逻辑。

对前端来说,常见的:

  • 日志记录。在多个位置都需要记录信息,以便于调试和监控。
  • 异常处理。在多个位置都需要捕获和处理异常。
  • 依赖注入。可以管理组件之间的依赖关系,比如在多个位置都需要组件的实例。
  • 状态管理。不多赘述。
  • 国际化。不多赘述。

2.2,常见解决方式

Vue 中的组件封装,mixin、hooks(Vue3)、自定义指令、状态管理,路由守卫都属于解决该问题的范畴。

React 中的组件封装,HOC,hooks,Context,状态管理也属于解决该问题的范畴。

一些设计模式:装饰器模式,观察者模式,责任链模式(处理审批)。

3,HOC 举例

React 中,通常会以 src/HOC 创建目录,文件名以 with 开头

使用 React16 进行开发离不开 HOC,无论是第3方库还是日常开发。下面只是简单举例,后面的文章也会遇到 HOC 的使用。

3.1,全局功能

比如,日志记录:

import { Component } from "react";export default function withLog(Comp) {return class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}组件被创建了`);}componentWillUnmount() {console.log(`${Comp.name}组件被销毁了`);}render() {return <Comp {...this.props} />;}};
}

使用

import HelloWorld from "./components/HelloWorld";
import withLog from "./HOC/withLog";const Alog = withLog(HelloWorld)

因为是函数,所以可嵌套来增加多个额外功能。

const ResultComp = withLogin(withLog(CompA))

3.2,小范围使用

比如生成遍历循环的选项。

import { Component } from "react";
export default function withDataGroup(Comp) {return class DataGroupWrapper extends Component {static defaultProps = {datas: [],};render() {const comps = this.props.datas.map((it) => <Comp key={it.value} info={it} {...this.props} />);return <>{comps}</>;}};
}

Select 组件。保持源数据 data 数据结构一致时,checkbox 组件也可以使用 withDataGroup

import { Component } from "react";
import withDataGroup from "./HOC/withDataGroup";class Option extends Component {render() {return <option value={this.props.info.value}>{this.props.info.text}</option>;}
}const OptGroup = withDataGroup(Option);export default class Select extends Component {render() {return (<selectvalue={this.props.value}onChange={(e) => {this.props.onChange?.(e.target.value);}}><OptGroup {...this.props}></OptGroup></select>);}
}

使用

import React, { Component } from "react";
import Select from "./components/Select";const datas = [{ value: "football", text: "足球" },{ value: "basketball", text: "篮球" },{ value: "movie", text: "电影" },
];export default class App extends Component {state = {value: "",datas,};handleChange = (value, name, e) => {this.setState({value,});};render() {return (<><div>{this.state.value}</div><Select {...this.state} onChange={this.handleChange} /></>);}
}

4,HOC 使用注意点

4.1,不要在 render 中使用

因为这样每次都会创建新的组件,效率低而且状态每次都会重置。

4.2,不要在高阶组件内部修改传入的组件

高阶组件内部,只应该增加功能。如果修改了原组件,会导致代码逻辑混乱,而且这种情况,逻辑写到原组件更合理。

4.3,只做一件事

一般只做一件事。这样代码比较简洁,原组件也方便扩展其他功能。


以上。

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

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

相关文章

Android --- 交换两个布局

准备布局 exchange_out_layout exchange_in_layout <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"andr…

免费,Python蓝桥杯等级考试真题--第13级(含答案解析和代码)

Python蓝桥杯等级考试真题–第13级 一、 选择题 答案&#xff1a;C 解析&#xff1a;正向下标由0开始&#xff0c;下标3代表第四个元素&#xff0c;故答案为C。 答案&#xff1a;A 解析&#xff1a;range&#xff08;0,4&#xff09;的取前不取后&#xff0c;元组的符号是小括…

【CGAL】Region_Growing 检测平面并保存

目录 说明一、算法原理二、代码展示三、结果展示 说明 本篇博客主要介绍CGAL库中使用Region_Growing算法检测平面的算法原理、代码以及最后展示结果。其中&#xff0c;代码部分在CGAL官方库中提供了例子。我在其中做了一些修改&#xff0c;使其可以读取PLY类型的点云文件&…

可行性研究报告编制参考资料(Word原件-软件全套资料)

1业务需求可行性分析 2技术可行性分析 2.1规范化原则 2.2高度的兼容性和可移植性 2.3人性化、适用性 2.4标准化统一设计原则 2.5先进安全可扩展性原则 3开发周期可行性分析 4人力资源可行性分析 5成本分析 6收益分析 7结论 软件全套精华资料包清单部分文件列表&#xff1a; 工作…

【搭建大语言模型】使用LocalGPT搭建本地大语言模型服务并实现远程访问进行交互

文章目录 前言环境准备1. localGPT部署2. 启动和使用3. 安装cpolar 内网穿透4. 创建公网地址5. 公网地址访问6. 固定公网地址 前言 本文主要介绍如何本地部署LocalGPT并实现远程访问&#xff0c;由于localGPT只能通过本地局域网IP地址端口号的形式访问&#xff0c;实现远程访问…

设计模式15——享元模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 享元模式&#xff08;Flyweigh…

Linux信号:信号的概念及意义

目录 一、什么是信号 kill-l查看信号 二、信号的产生 2.1系统调用 kill raise abort 2.2软件条件 13)SIGPIPE pipe信号 14&#xff09;SIGAKARM alarm信号 2.2硬件中断 2.3异常 8)SIGFPE 除0异常 11)SIGSEGV 野指针 2.4信号处理的常见方式 三、Core Dump和term…

一文详解SaaS增长模式:PLG、MLG、SLG哪种更适合你?

在SaaS&#xff08;软件即服务&#xff09;的领域中&#xff0c;增长策略的选择对于企业的成功至关重要。其中&#xff0c;PLG&#xff08;产品驱动增长&#xff09;、MLG&#xff08;市场驱动增长&#xff09;和SLG&#xff08;销售驱动增长&#xff09;是三种常见的策略&…

Wireshark简介

Wireshark是一款流行的网络协议分析工具&#xff0c;可以捕获和显示网络上传输的数据包的详细信息。以下是Wireshark的基本使用方法&#xff1a; 安装Wireshark 访问Wireshark的官方网站下载适用于您操作系统的版本。按照安装向导完成安装。 打开Wireshark 启动Wireshark程…

Centos 7 安装刻录至服务器

前言 在日常测试中&#xff0c;会遇到很多安装的场景&#xff0c;今天给大家讲一下centos 7 的安装&#xff0c;希望对大家有所帮助。 一.下载镜像 地址如下&#xff1a; centos官方镜像下载地址https://www.centos.org/download/ 按照需求依次点击下载 二.镜像刻录 镜像刻…

强悍!轻量级 Viedo Download 项目!!【送源码】

今天给大家分享一个非常轻量实用的命令行视频下载项目&#xff1a;Lux。 项目简介 Lux是一款基于Golang编写的快速、简单的视频下载库和命令行工具&#xff0c;支持众多个流行的视频网站&#xff0c;包括 YouTube、Bilibili、优酷、爱奇艺、腾讯视频、抖音快手等。 界面简洁易…

Spring Aop 实现对mapper层入参进行重新赋值

需求描述&#xff1a; 需要对mapper查询的入参的某个属性值进行特殊处理后查询 不影响原来业务且方便扩展维护 1&#xff0c;自定义注解 import java.lang.annotation.*;/*** 针对 mapper层入参 按照一定规则进行特殊处理重新赋值*/ Target(ElementType.METHOD) Retention(Ret…

整理好了!2024年最常见 20 道 Redis面试题(十)

上一篇地址&#xff1a;整理好了&#xff01;2024年最常见 20 道 Redis面试题&#xff08;九&#xff09;-CSDN博客 十九、Redis 的监控和性能评估工具有哪些&#xff1f; Redis 的监控和性能评估工具主要包括以下几种&#xff1a; redis-benchmark 性能测试工具&#xff1a;…

cs与msf权限传递,以及mimikatz抓取win2012明文密码

CS与MSF权限传递 在进行渗透测试时&#xff0c;CS&#xff08;Cobalt Strike&#xff09;和MSF&#xff08;Metasploit Framework&#xff09;是两种常用的工具。它们之间的权限传递通常涉及到在目标系统上建立后门&#xff0c;然后将控制权从一个工具转移到另一个工具。具体的…

重生之 SpringBoot3 入门保姆级学习(07、整合 Redis 案例)

重生之 SpringBoot3 入门保姆级学习&#xff08;07、整合 Redis 案例&#xff09; 导入 Maven 依赖并刷新 Maven <dependencies><!--springboot3 Web 依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring…

高效至臻,Media Encoder 2024 for Mac——您的专业媒体处理首选

Media Encoder 2024 for Mac是一款专为Mac用户打造的专业视频和音频编码工具&#xff0c;凭借其卓越的编码能力和智能编辑功能&#xff0c;为用户提供了前所未有的媒体处理体验。无论是高清、4K还是8K的视频文件&#xff0c;Media Encoder 2024都能轻松驾驭&#xff0c;确保在压…

学习javascript的函数

1.什么是函数&#xff1f; 可以重复被使用的代码块 作用&#xff1a;函数可以把具有相同或者相似逻辑的代码“包裹起来”&#xff0c;有利于代码的复用。 2.函数的基本使用 1.定义函数 利用关键字Function 定义函数&#xff08;声明函数&#xff09; function 函数名(){函…

4、xss-labs之level4、lecel5

一、level4 1、测试分析 level4跟之前的3一样的思路&#xff0c;闭合value的值&#xff0c;但是通过双引号闭合&#xff0c;然后使用onclick的属性弹窗绕过 输入3的payload&#xff1a; 2、所以构造payload payload&#xff1a;"οnclickalert(1)// 二、level5 1、测…

uniapp高校二手书交易商城回收系统 微信小程序python+java+node.js+php

每年因为有大量的学生在接受教育&#xff0c;每到大学毕业季的时候&#xff0c;所使用的大量书籍对他们自己来说&#xff0c;很多是没有用&#xff0c;同时由于书籍多和不方便携带&#xff0c;导致很多大学生在毕业时将教材直接丢弃是在校大学生处理已用教材的一种主要方式。然…

数据结构-二叉树系统性学习(四万字精讲拿捏)

前言 这里我会从二叉树的概念开始讲解&#xff0c;其次涉及到概念结构&#xff0c;以及堆的实现和堆排序。 目的是&#xff0c;堆比二叉树简单&#xff0c;同时堆本质上是二叉树的其中一种情况&#xff0c;堆属于二叉树顺序结构的实现 最后完善二叉树的讲解&#xff0c;也就是…