高阶类 & HOC & anonymous class extends

js 匿名 class extends / mix-ins / 多继承

高阶函数 HOF, 接收一个 function 返回一个新的 function

高阶组件 HOC, 接收一个 component 返回一个新的 component

高阶类 HOC , 接收一个 class 返回一个新的 class

Mix-ins

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Mix-ins

//  匿名 class extends
let calculatorMixin = Base => class extends Base {
calc() { }
}; // 匿名 class extends
let randomizerMixin = Base => class extends Base {
randomize() { }
};
class Foo { }

class Bar extends calculatorMixin(randomizerMixin(Foo)) {
//
}

Mixins Considered Harmful

https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

匿名 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#use-hocs-for-cross-cutting-concerns

https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


高阶类 & HOC & anonymous class extends的更多相关文章

  1. 高阶函数 HOF & 高阶组件 HOC

    高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...

  2. react系列(二)高阶组件-HOC

    高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...

  3. React: 高阶组件(HOC)

    一.简介 如我们所知,JavaScript有高阶函数这么一个概念,高阶函数本身是一个函数,它会接收或者返回一个函数,进而对该函数进行操作.其实,在React中同样地有高阶组件这么一个东西,称为HOC, ...

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

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

  5. 高阶组件 HOC

    一. A higher-order component (HOC) is an advanced technique in React for reusing component logic. a h ...

  6. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  7. React 精要面试题讲解(五) 高阶组件真解

    说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...

  8. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  9. 关于react16.4——高阶组件(HOC)

    高阶组件是react中用于重用组件逻辑的高级技术.可以说是一种模式.具体来说呢,高阶组件是一个函数,它接收一个组件并返回一个新的组件. 就像这样, const EnhancedComponent = ...

随机推荐

  1. 编码占用的字节数 1 byte 8 bit 1 sh 1 bit 中文字符编码 2. 字符与编码在程序中的实现 变长编码 Unicode UTF-8 转换 在网络上传输 保存到磁盘上 bytes

    小结: 1.UNICODE 字符集编码的标准有很多种,比如:UTF-8, UTF-7, UTF-16, UnicodeLittle, UnicodeBig 等: 2 服务器->网页 utf-8 ...

  2. pthon之变量

    1.变量由三部分组成: 变量名  =   值 如:name = 'xiaohan'     sex='男'   age = 20 2.变量名的规范 2.1 变量名只能是字母,数字或下划线的任意组合 2 ...

  3. socket 的使用

    基于TCP协议的socket tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 server端 import socket sk = socket.socket() sk.bind( ...

  4. Java中get()和set()作用

    一.前言 在程序的设计中,我们普遍的定义一个private变量,然后为这个变量加上get() .set()方法,那为何不直接定义一个public变量呢? 很多人是这样回答的: 1.关系到安全性的问题, ...

  5. eclipse项目放到github

    一,下载git ,配置用户名和邮箱: git config --global user.name "name"       git config --global user.ema ...

  6. Redis,JedisPool工具类

    Redis,JedisPool工具类 1.JedisPool 详细配置解释代码 2.Jedis工具类 导入相关依赖: commons-pool2-2.3.jar jedis-2.7.0.jar 1.J ...

  7. GeoMesa 环境搭建

    GeoMesa 环境搭建 版本 虚拟机安装 os centos7 Centos安装 CentOS安装Jdk并配置环境变量 hadoop.hbase环境部署 geomesa_hbase部署 geoser ...

  8. Tomcat 核心组件 Connector

    Connector是Tomcat的连接器,其主要任务是负责处理浏览器发送过来的请求,并创建一个Request和Response的对象用于和浏览器交换数据,然后产生一个线程用于处理请求,Connecto ...

  9. hadoop的Namenode HA原理详解

    为什么要Namenode HA? 1. NameNode High Availability即高可用. 2. NameNode 很重要,挂掉会导致存储停止服务,无法进行数据的读写,基于此NameNod ...

  10. 阿里云MQ

    阿里云众多中间件服务中有一款非常强大的中间见服务,在企业互联网架构中起到不可替代的作用,相比较开源的RabbitMQ,阿里的消息队列MQ承受的住阿里内部1000+核心应用的使用,每天转几千条消息,稳定 ...