高阶函数 HOF & 高阶组件 HOC

高阶类 js HOC

高阶函数 HOF

  1. 函数作为参数
  2. 函数作为返回值
"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

  1. 组件作为参数

  2. 组件作为返回值



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的更多相关文章

  1. 高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)

    一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入 ...

  2. python——高阶函数:高阶函数

    python高阶函数 00初识高阶函数 一等公民 函数在python中是一等公民(First-Class Object),同样和变量一样,函数也是对象,只不过是可调用的对象,所以函数也可以作为一个普通 ...

  3. 初识python:高阶函数(附-高阶函数)

    定义: 变量可以指向函数,函数的参数能接收变量,那么,一个函数可以接收另一个函数作为参数,这种函数就称之为高阶函数. 简单说就是:把函数当作参数传递的函数就是高阶函数 特性 1.把一个函数名当作实参传 ...

  4. 高阶组件&&高阶函数(一)

    antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数, ...

  5. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  6. React事件处理、收集表单数据、高阶函数

    3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...

  7. c#语言-高阶函数

    介绍 如果说函数是程序中的基本模块,代码段,那高阶函数就是函数的高阶(级)版本,其基本定义如下: 函数自身接受一个或多个函数作为输入. 函数自身能输出一个函数,即函数生产函数. 满足其中一个条件就可以 ...

  8. JavaScript高阶函数 map reduce filter sort

    本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 高阶函数            一个函数就接收另一个函数作为参数,这种函数就称之为高阶函数          1.高阶函数之map:   ...

  9. [Node.js] 闭包和高阶函数

    原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...

随机推荐

  1. Uber三代API 生命周期管理平台实现 Uber

    Uber三代API 生命周期管理平台实现 - InfoQ https://www.infoq.cn/article/H8Ml6L7vJGQz0efpWvyJ Uber 三代 API 生命周期管理平台实 ...

  2. Git恢复之前版本的两种方法reset、revert

    实战 回退 1.删除之前的提交 git reset --hard id 推送到远程 git push -f [git log中确实删除了,但是拿到可以恢复] 2.不删除之前的提交 git revert ...

  3. cpp异常机制思考

    https://www.cnblogs.com/qq329914874/p/6734701.html

  4. 内网渗透之信息收集-linux

    linux     系统信息         grep MemTotal /proc/meminfo #查看系统内存总量         cat /etc/issue #查看系统名称         ...

  5. 使用mybatis自动实现接口封装返回结果集

    import java.lang.annotation.Annotation; import java.lang.annotation.Documented; import java.lang.ann ...

  6. .net core 和 WPF 开发升讯威在线客服与营销系统:使用线程安全的 BlockingCollection 实现高性能的数据处理

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  7. php之bindValue和bindParam的区别

    PDOStatement::bindValue -  把一个值绑定到一个参数 绑定一个值到用作预处理的 SQL 语句中的对应命名占位符或问号占位符. PDOStatement::bindParam - ...

  8. Kafka调试入门(一)

    很多人对kafka消息队列应该不陌生,使用起来也比较方便.对kafka最常见的操作一般有如下几种: 启动kafka集群 创建一个名称为xxx的主题(topic) 查看已经创建好的主题 向xxx这个主题 ...

  9. PTA 乙 1002

    1002 写出这个数 题目描述 读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10^1 ...

  10. 2019牛客国庆集训派对day2

    A(模拟): #include <bits/stdc++.h> using namespace std; const int inf = 0x3f3f3f3f; const double ...