高阶函数 HOF & 高阶组件 HOC
高阶函数 HOF & 高阶组件 HOC
高阶类 js HOC
高阶函数 HOF
- 函数作为参数
- 函数作为返回值
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-10-01
* @modified
*
* @description 高阶函数
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link
* @solutions
*
* @best_solutions
*
*/
const log = console.log;
let count = 0;
const stID = setTimeout(() => {
log(`setTimeout`, count);
clearTimeout(stID);
}, 1000);
const siID = setInterval(() => {
count += 1;
log(`setInterval`, count);
if(count >= 3) {
clearTimeout(siID);
}
}, 1000);
const arr = [...new Uint8Array(10)].map((item, i) => item = i);
log(`arr =`, arr)
const filter = arr.filter((item, i) => item % 2 === 0);
log(`filter=`, filter)
/*
$ node hof.js
arr = [
0, 1, 2, 3, 4,
5, 6, 7, 8, 9
]
filter= [ 0, 2, 4, 6, 8 ]
setTimeout 0
setInterval 1
setInterval 2
setInterval 3
*/
高阶组件 HOC
组件作为参数
组件作为返回值
component wrapper
高阶组件,是一个函数,接受一个组件作为参数,返回一个包裹后的新组件!
匿名 class extends
// This function takes a component...
function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
// return class HOC extends React.Component {
// 匿名 class extends
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}
componentDidMount() {
// ... that takes care of the subscription...
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}
Debugging
Wrap the Display Name for Easy Debugging
function withSubscription(WrappedComponent) {
// 命名 class extends
class WithSubscription extends React.Component {/* ... */}
// 获取 组件名
WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
return WithSubscription;
}
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
import React, { Component } from 'react';
// 获取组件名
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'HOC Component';
}
// HOC 1. 接收一个组件作为参数
function HOC(WrappedComponent, props) {
// do something
const name = WrappedComponent.name || "hoc";
HOC.displayName = `HOC_${getDisplayName(WrappedComponent)}`;
// HOC 2. 返回一个新组件
// 匿名 class extends (Anonymous)
// return class extends Component {
// 命名 class extends ()
return class HOC extends Component {
// constructor(props) {
// super();
// }
render() {
return (
<>
<WrappedComponent props={props} data={name}/>
</>
)
}
}
}
export default HOC;
refs
https://reactjs.org/docs/higher-order-components.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
高阶函数 HOF & 高阶组件 HOC的更多相关文章
- 高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)
一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入 ...
- python——高阶函数:高阶函数
python高阶函数 00初识高阶函数 一等公民 函数在python中是一等公民(First-Class Object),同样和变量一样,函数也是对象,只不过是可调用的对象,所以函数也可以作为一个普通 ...
- 初识python:高阶函数(附-高阶函数)
定义: 变量可以指向函数,函数的参数能接收变量,那么,一个函数可以接收另一个函数作为参数,这种函数就称之为高阶函数. 简单说就是:把函数当作参数传递的函数就是高阶函数 特性 1.把一个函数名当作实参传 ...
- 高阶组件&&高阶函数(一)
antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数, ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- React事件处理、收集表单数据、高阶函数
3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...
- c#语言-高阶函数
介绍 如果说函数是程序中的基本模块,代码段,那高阶函数就是函数的高阶(级)版本,其基本定义如下: 函数自身接受一个或多个函数作为输入. 函数自身能输出一个函数,即函数生产函数. 满足其中一个条件就可以 ...
- JavaScript高阶函数 map reduce filter sort
本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 高阶函数 一个函数就接收另一个函数作为参数,这种函数就称之为高阶函数 1.高阶函数之map: ...
- [Node.js] 闭包和高阶函数
原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...
随机推荐
- Visual Studio中自定义代码段!
Visual Studio中自定义代码段! 第一步:在编辑器中进行快捷键的输入[ctrl + shift + p] 或者 点击 查看 第一个选项就是!请看下图 第二步:选择你要配置代码段的语言, 这里 ...
- ETL调优的一些分享(下)(转载)
如在上篇文章<ETL调优的一些分享(上)>中已介绍的,ETL是构建数据仓库的必经一环,它的执行性能对于数据仓库构建性能有重要意义,因此对它进行有效的调优将十分重要.ETL业务的调优可以从若 ...
- VMware vSphere (EXSI) 安装使用
VMware vSphere 镜像下载 VMware vSphere Hypervisor (ESXi) 6.7 https://my.vmware.com/cn/web/vmware/downloa ...
- P1663 山
写在前面 简单的二分答案,稍微加点数学计算,很有意思. 算法思路 二分答案可行的原因:答案具有单调性. 这道题目中证明一下:首先无限高显然是能看到任何一个点的,且山的每一条边都是对答案的一个限制,因此 ...
- mysql、sql server、oracle大比较
MYSQL 多个数据库多个用户形式(最好每个数据库对应一个用户),占用内存小,适用于所有平台,开源免费 客户端和命令窗口,都是由数据库决定内容-> use datebase; 组函数在selec ...
- 利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- UML——RUP(Rational Unified Process)
一.宏观导图 二.论细节 RUP(Rational Unified Process)统一软件过程,是指要达到一个指定的目标而采取的一些系列有序的步骤,其目的是高效.准时地提交一个满足业务需求的软件产品 ...
- Inceptor Parse error [Error 1110] line 102,24 SQL问题
今天遇到一个SQL跑不通的问题: 去掉cast as 去掉round 最初以为是Inceptor不兼容ORACLE语句Cast as 导致的,做的以下测试 发现都能跑通,说明Cast as语句在Inc ...
- Luogu4168 蒲公英 (分块)
题目传送门 题意 长度为n的序列,有m次询问,每次询问求\([l,r]\) 间的众数,如果有多个,输出最小的那个 \(n\le 4\times 10^4,m\le 5\times 10^5,a_i\l ...
- DFS——求图的连通性问题
DFS作为一个竞赛必学的一个知识点,怎么说我都得写一下 遍历就相当于爆搜,只不过是搜的方式比较规整罢了. 深度优先遍历:为了避免重复访问某个顶点,可以设一个标志数组vis[i],未访问时值为0,访问一 ...