高阶函数 HOF & 高阶组件 HOC

高阶类 js HOC

高阶函数 HOF

  1. 函数作为参数
  2. 函数作为返回值
  1. "use strict";
  2. /**
  3. *
  4. * @author xgqfrms
  5. * @license MIT
  6. * @copyright xgqfrms
  7. * @created 2020-10-01
  8. * @modified
  9. *
  10. * @description 高阶函数
  11. * @difficulty Easy Medium Hard
  12. * @complexity O(n)
  13. * @augments
  14. * @example
  15. * @link
  16. * @solutions
  17. *
  18. * @best_solutions
  19. *
  20. */
  21. const log = console.log;
  22. let count = 0;
  23. const stID = setTimeout(() => {
  24. log(`setTimeout`, count);
  25. clearTimeout(stID);
  26. }, 1000);
  27. const siID = setInterval(() => {
  28. count += 1;
  29. log(`setInterval`, count);
  30. if(count >= 3) {
  31. clearTimeout(siID);
  32. }
  33. }, 1000);
  34. const arr = [...new Uint8Array(10)].map((item, i) => item = i);
  35. log(`arr =`, arr)
  36. const filter = arr.filter((item, i) => item % 2 === 0);
  37. log(`filter=`, filter)
  38. /*
  39. $ node hof.js
  40. arr = [
  41. 0, 1, 2, 3, 4,
  42. 5, 6, 7, 8, 9
  43. ]
  44. filter= [ 0, 2, 4, 6, 8 ]
  45. setTimeout 0
  46. setInterval 1
  47. setInterval 2
  48. setInterval 3
  49. */

高阶组件 HOC

  1. 组件作为参数

  2. 组件作为返回值

component wrapper

高阶组件,是一个函数,接受一个组件作为参数,返回一个包裹后的新组件!

匿名 class extends


  1. // This function takes a component...
  2. function withSubscription(WrappedComponent, selectData) {
  3. // ...and returns another component...
  4. // return class HOC extends React.Component {
  5. // 匿名 class extends
  6. return class extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. this.handleChange = this.handleChange.bind(this);
  10. this.state = {
  11. data: selectData(DataSource, props)
  12. };
  13. }
  14. componentDidMount() {
  15. // ... that takes care of the subscription...
  16. DataSource.addChangeListener(this.handleChange);
  17. }
  18. componentWillUnmount() {
  19. DataSource.removeChangeListener(this.handleChange);
  20. }
  21. handleChange() {
  22. this.setState({
  23. data: selectData(DataSource, this.props)
  24. });
  25. }
  26. render() {
  27. // ... and renders the wrapped component with the fresh data!
  28. // Notice that we pass through any additional props
  29. return <WrappedComponent data={this.state.data} {...this.props} />;
  30. }
  31. };
  32. }

Debugging

Wrap the Display Name for Easy Debugging


  1. function withSubscription(WrappedComponent) {
  2. // 命名 class extends
  3. class WithSubscription extends React.Component {/* ... */}
  4. // 获取 组件名
  5. WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  6. return WithSubscription;
  7. }
  8. function getDisplayName(WrappedComponent) {
  9. return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  10. }

  1. import React, { Component } from 'react';
  2. // 获取组件名
  3. function getDisplayName(WrappedComponent) {
  4. return WrappedComponent.displayName || WrappedComponent.name || 'HOC Component';
  5. }
  6. // HOC 1. 接收一个组件作为参数
  7. function HOC(WrappedComponent, props) {
  8. // do something
  9. const name = WrappedComponent.name || "hoc";
  10. HOC.displayName = `HOC_${getDisplayName(WrappedComponent)}`;
  11. // HOC 2. 返回一个新组件
  12. // 匿名 class extends (Anonymous)
  13. // return class extends Component {
  14. // 命名 class extends ()
  15. return class HOC extends Component {
  16. // constructor(props) {
  17. // super();
  18. // }
  19. render() {
  20. return (
  21. <>
  22. <WrappedComponent props={props} data={name}/>
  23. </>
  24. )
  25. }
  26. }
  27. }
  28. 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. Visual Studio中自定义代码段!

    Visual Studio中自定义代码段! 第一步:在编辑器中进行快捷键的输入[ctrl + shift + p] 或者 点击 查看 第一个选项就是!请看下图 第二步:选择你要配置代码段的语言, 这里 ...

  2. ETL调优的一些分享(下)(转载)

    如在上篇文章<ETL调优的一些分享(上)>中已介绍的,ETL是构建数据仓库的必经一环,它的执行性能对于数据仓库构建性能有重要意义,因此对它进行有效的调优将十分重要.ETL业务的调优可以从若 ...

  3. VMware vSphere (EXSI) 安装使用

    VMware vSphere 镜像下载 VMware vSphere Hypervisor (ESXi) 6.7 https://my.vmware.com/cn/web/vmware/downloa ...

  4. P1663 山

    写在前面 简单的二分答案,稍微加点数学计算,很有意思. 算法思路 二分答案可行的原因:答案具有单调性. 这道题目中证明一下:首先无限高显然是能看到任何一个点的,且山的每一条边都是对答案的一个限制,因此 ...

  5. mysql、sql server、oracle大比较

    MYSQL 多个数据库多个用户形式(最好每个数据库对应一个用户),占用内存小,适用于所有平台,开源免费 客户端和命令窗口,都是由数据库决定内容-> use datebase; 组函数在selec ...

  6. 利用Javascript制作网页特效(时间特效)

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  7. UML——RUP(Rational Unified Process)

    一.宏观导图 二.论细节 RUP(Rational Unified Process)统一软件过程,是指要达到一个指定的目标而采取的一些系列有序的步骤,其目的是高效.准时地提交一个满足业务需求的软件产品 ...

  8. Inceptor Parse error [Error 1110] line 102,24 SQL问题

    今天遇到一个SQL跑不通的问题: 去掉cast as 去掉round 最初以为是Inceptor不兼容ORACLE语句Cast as 导致的,做的以下测试 发现都能跑通,说明Cast as语句在Inc ...

  9. Luogu4168 蒲公英 (分块)

    题目传送门 题意 长度为n的序列,有m次询问,每次询问求\([l,r]\) 间的众数,如果有多个,输出最小的那个 \(n\le 4\times 10^4,m\le 5\times 10^5,a_i\l ...

  10. DFS——求图的连通性问题

    DFS作为一个竞赛必学的一个知识点,怎么说我都得写一下 遍历就相当于爆搜,只不过是搜的方式比较规整罢了. 深度优先遍历:为了避免重复访问某个顶点,可以设一个标志数组vis[i],未访问时值为0,访问一 ...