【React】高阶组件

概述

高阶组件并非一个组件,而是增强组件功能的一个函数。

高阶组件的作用是对多个组件公共逻辑进行横向抽离。

高阶组件 – React (reactjs.org)

示例

ChildCom1.jsx

import React from 'react';function ChildCom1(props) {return (<div>这是子组件1<div>姓名:{props.name}</div></div>);
}export default ChildCom1;

ChildCom2.jsx

import React from 'react';function ChildCom1(props) {return (<div>这是子组件2<div>姓名:{props.age}</div></div>);
}export default ChildCom2;

withLog.js

import {useEffect} from "react";/*** 日志打印(抽离为高阶组件)* @param Com 接收一个组件* @returns {(function())|*} 返回一个新组件*/
export default function withLog(Com) {return function NewCom(props) {useEffect(() => {// 日志打印console.log(`${Com.name}已经创建,创建时间是:`, new Date().toLocaleString());return function () {// 组件销毁时执行console.log(`${Com.name}已经销毁,销毁时间是:`, new Date().toLocaleString());}}, []);// 一般来讲,传入的组件会作为新组件的视图返回return <Com {...props}/>}
}

withTimer.js

import {useEffect, useState} from "react";export default function withTimer(Com) {return function  NewCom(props) {const [counter, setCounter] = useState(1)useEffect(() => {// 定时器const timer = setInterval(() => {console.log(counter)setCounter(counter + 1)}, 1000)return () => {clearInterval(timer)}}, [counter]);return <Com {...props} />}
}

App.js

import ChildCom1 from "./components/ChildCom1";
import ChildCom2 from "./components/ChildCom2";
import withLog from "./HOC/withLog";
import withTimer from "./HOC/withTimer";const NewChildCom1 = withTimer(withLog(ChildCom1))
const NewChildCom2 = withTimer(withLog(ChildCom2))function App() {return (<div className="App"><h1>我是 App</h1><NewChildCom1 name={"xiuxiu"}/><NewChildCom2 age={18}/></div>);
}export default App;

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

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

相关文章

基础算法---滑动窗口

文章目录 什么是滑动窗口1.长度最小的子数组2.无重复字符的最长子串3.最大连续1的个数4.将x减到0的最小操作数5.最小覆盖子串总结 什么是滑动窗口 滑动窗口&#xff08;Sliding Window&#xff09;是一种在计算机科学中用于解决各种子数组或子字符串问题的技术。滑动窗口技术通…

JavaScripts数组里的对象排序的24个方法

1. 使用 Array.prototype.sort() 这是最基本、也是最常用的方法。sort() 方法会原地修改数组&#xff0c;并返回排序后的数组。你需要传入一个比较函数来定义排序逻辑。 const array [{ name: Alice, age: 25 },{ name: Bob, age: 22 },{ name: Charlie, age: 30 } ];// 按照…

【SQL每日一练】HackerRan-Basic Join-Challenges练习

文章目录 题目题析题解1.sqlserver 题目 编写一个查询来打印 hacker _ id、 name 和每个学生创建的挑战的总数。按照挑战的总数按降序对结果进行排序。如果不止一个学生创建了相同数量的挑战&#xff0c;那么按 hacker _ id 对结果进行排序。如果不止一个学生创建了相同数量的…

北京BJ90升级新款迈巴赫大连屏四座头等舱行政四座马鞍

北京BJ90升级奔驰迈巴赫头等舱行政四座大联屏的内饰效果会非常出色&#xff0c;将为车辆带来更豪华、高端的内饰氛围。以下是升级后可能的效果&#xff1a; • 科技感提升&#xff1a;奔驰的中控系统一直以来都以其先进的科技和用户友好的界面而闻名。升级后&#xff0c;北京B…

Windows Api如何创建一个快捷方式并且在开始菜单搜索到自己的应用

原文链接&#xff1a;http://cshelloworld.com/home/detail/1804473083243925504 当我们点击win10系统搜索框的时候&#xff0c;输入名称 &#xff0c;win10会帮助我们匹配到对应的应用。这里搜索框实际上就是windows系统的开始菜单。 接下来我们随便找一个应用&#xff0c;右…

湖北民族大学2024年成人高等继续教育招生简章

湖北民族大学&#xff0c;这所承载着深厚文化底蕴和卓越教育理念的学府&#xff0c;在崭新的2024年再次敞开怀抱&#xff0c;热烈欢迎有志于深化学习、提升自我的成人学员们。今年的成人高等继续教育招生&#xff0c;不仅是学校对于终身教育理念的具体实践&#xff0c;更是为广…

每日签到页面模板组件,简单好用,用了会上瘾的那种

uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝&#xff09;、快应用等多个平台。 今日给…

机器学习算法(二):1 逻辑回归的从零实现(普通实现+多项式特征实现非线性分类+正则化实现三个版本)

文章目录 前言一、普通实现1 数据集准备2 逻辑回归模型3 损失函数4 计算损失函数的梯度5 梯度下降算法6 训练模型二、多项式特征实现非线性分类1 数据准备与多项式特征构造2 逻辑回归模型三、逻辑回归 --- 正则化实现1 数据准备2 逻辑回归模型3 正则化损失函数4 计算损失函数的…

前端下载文件流,axios设置responseType: arraybuffer/blob无效

项目中调用后端下载文件接口&#xff0c;设置responseType: arraybuffer,实际拿到的数据data是字符串 axios({method: post,url: /api/v1/records/recording-file/play,// 如果有需要发送的数据&#xff0c;可以放在这里data: { uuid: 06e7075d-4ce0-476f-88cb-87fb0a1b4844 }…

图像编辑技术的新篇章:基于扩散模型的综述

在人工智能的浪潮中&#xff0c;图像编辑技术正经历着前所未有的变革。随着数字媒体、广告、娱乐和科学研究等领域对高质量图像编辑需求的不断增长&#xff0c;传统的图像编辑方法已逐渐无法满足日益复杂的视觉内容创作需求。尤其是在AI生成内容&#xff08;AIGC&#xff09;的…

CPP-类对象大小的组成

要计算一个类对象的大小要先明白一个问题&#xff1a;类中既可以有成员变量&#xff0c;又可以有成员函数&#xff0c;那么一个类的对象中包含了什么&#xff1f; 下面来看一段代码&#xff1a; // 类中既有成员变量&#xff0c;又有成员函数 class A1 { public:void f1() {} …

快速生成基于vue-element的后台管理框架,实现短时间二次开发

你是否遇到过当你想要独立开发一个项目时对反复造轮子的烦扰&#xff1f; 这种流水线的操作实在让人受不了 而vue-element-template很好的帮你解决了这个烦恼 只需克隆下来&#xff0c;改改图标&#xff0c;模块名&#xff0c;甚至样式&#xff0c;就会变成一个全新的自己的项目…

轻松恢复丢失数据EasyRecovery你的数据守护神

数据丢失&#xff1f;别怕&#xff01;EasyRecovery来帮忙 大家好呀&#xff0c;今天我要分享一个我超级喜欢的数据恢复软件——EasyRecovery&#xff01;&#x1f389; 如果你也经历过误删文件、硬盘格式化或是意外丢失重要数据的尴尬和焦虑&#xff0c;那你一定要看看这个神器…

uniapp 微信小程序更改轮播图指示点

仅微信小程序有效 /* #ifdef MP-WEIXIN */// 默认指示点样式wx-swiper .wx-swiper-dot {position: relative;background-color: #ffffff;width: 28rpx;border-radius: 10rpx;height: 8rpx;opacity: 0.4;}// 当前选中样式wx-swiper .wx-swiper-dot-active {background-color: #f…

ReactNative进阶(二十八)Metro

文章目录 一、前言二、Metro生命周期2.1 解析(Resolution)2.2 转换(Transformation)2.3 序列化(Serialization) 三、拓展阅读 一、前言 众所周知&#xff0c;Metro 是 React Native 默认的 JavaScript 打包模块。对于前端项目&#xff0c;打包工具已有webpack(大而全&#xff…

React Hooks使用规则:为什么不在条件语句和循环中使用它们

React Hooks为函数组件引入了状态和生命周期特性&#xff0c;极大地增强了其功能。然而&#xff0c;正确使用Hooks是确保组件稳定性和性能的关键。本文将探讨React Hooks的基本规则&#xff0c;以及为什么我们不应该在条件语句和循环中使用它们。 Hooks的基本规则 React团队为…

conda环境的备份和移植

备份和移植 Conda 环境可以通过以下步骤实现: 克隆环境 conda create --name backup_myenv --clone myenv# 删除原环境 # conda remove --name myenv --all移植 Conda 环境 方法1:使用 environment.yml 文件移植环境 # 导出环境的依赖项 conda env export --name myenv &g…

HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)(表格布局)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;table布局&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。…

HarmonyOS父子组件传递参数

HarmonyOS父子组件传递参数 1. 使用State和Prop进行父子组件传递———注意是单向同步 Prop装饰器&#xff1a;父子单向同步 注意&#xff1a;只支持单向同步&#xff0c;同时也只能支持string\number\boolean\enum比较简单的类型。 代码 // 使用 props 进行父子组件传值…

Python爬虫介绍

Python 作为一种广泛应用的编程语言&#xff0c;在 Web 开发、大数据开发、人工智能开发和嵌入式开发等领域都有着重要的应用。 Python 的易学性、清晰性和可移植性等特点使它得到很多技术人士的喜爱。对于数据科学和机器学习领域的程序员来说&#xff0c;Python 提供了强大的…