一、修饰器

1、类的修饰

修饰器是一个函数,用来修改类的行为

function testable(target) {
target.isTestable = true;
} @testable
class MyTestableClass {
// ...
} MyTestableClass.isTestable // true

注意:

修饰器函数的第一个参数,就是所要修饰的目标类

如果有多余参数,只能修饰器外面封装一层函数

function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
} @testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true @testable(false)
class MyClass {}
MyClass.isTestable // false

2、方法的修饰

例如:

@bind

修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。

二、高阶组件

高阶函数:接受函数作为输入,输出一个新的函数
高阶组件:接受react组件作为输入,输出一个新的react组件
通俗讲:在普通组件外面包一层逻辑,就是高阶组件
将功能相同或者相似的代码提取出来封装成一个可公用的函数或者对象

import React from 'react';

export default function withHeader(WrappedComponent) {
return class HOC extends React.Component {
static displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name})` state = {} render() {
return (
<div>
<div className="demo-header">
我是标题
</div>
<WrappedComponent {...this.props} />
</div>
);
}
};
}
import React from 'react';
import withHeader from '../decorator'; @withHeader
export default class Demo extends React.Component {
render() {
return (
<div>
我是一个普通组件
</div>
);
}
}

父组件和高阶组件区别:
高阶组件:可以封装公共逻辑,给当前组件传递方法属性,添加生命周期钩子,改善目前代码里业务逻辑和UI逻辑混杂在一起的现状
父组件:UI层的一些抽离

修饰器&高阶组件的更多相关文章

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

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

  2. ES 6 装饰器与 React 高阶组件

    关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了,两种说法都有,这种问题懒得纠结了--在用的时候发现这个东西很好用,平常用处可能不大,但是结合 React 就很 ...

  3. react之高阶组件(二)

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  4. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

  5. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  6. react高阶组件

    高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...

  7. react高阶组件的理解

    [高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...

  8. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

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

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

随机推荐

  1. AIX 系统补丁格式

    AIX 系统版本标准格式: 5300-06-11-0918 VR00-TL-SP-YYWW     5300-06-11-0918              ^-------- YYWW(2009年第 ...

  2. Codeforces Round #240 (Div. 2) 题解

    A: 1分钟题,往后扫一遍 int a[MAXN]; int vis[MAXN]; int main(){ int n,m; cin>>n>>m; MEM(vis,); ; i ...

  3. vue抽取公共方法———方法一

    方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]- ...

  4. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  5. TCP简单说|(上)

    本文在Creative Commons许可证下发布 TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人 ...

  6. 51nod 01背包

    #include<cstdio> #include<algorithm> #define REP(i, a, b) for(int i = (a); i < (b); i ...

  7. 生成ssh公有密钥而且注冊到Github Generate ssh rsa keys and register public key on Github

    私有密钥和公有密钥是成对的两个文件,私有文件保存在自己的本机,公有密钥保存到还有一端的server,站点等. github就是一种站点. 仅仅有保存了私有密钥的机器才干訪问远程的server等. 使用 ...

  8. [转]Massive Model Rendering Techniques

    Massive Model Rendering Techniques Andreas Dietrich Enrico Gobbetti Sung-Eui Yoon Abstract We presen ...

  9. Onvif开发之客户端搜索篇

    关于ONVIF的广播,有客户端搜索和服务端发现的区别:客户端向固定的网段和固定的端口发送广播消息,服务端在对应的端口回复广播请求消息本文首先介绍客户端如何进行广播的已经对广播回复的信息的基本处理. 客 ...

  10. 53.遇到SyntaxError: Unexpected token

    转自:https://segmentfault.com/q/1010000002649920/a-1020000002655984 不知道你自己现在已经发现问题没, Unexpected token ...