修饰器&高阶组件
一、修饰器
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层的一些抽离
修饰器&高阶组件的更多相关文章
- React 精要面试题讲解(五) 高阶组件真解
说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...
- ES 6 装饰器与 React 高阶组件
关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了,两种说法都有,这种问题懒得纠结了--在用的时候发现这个东西很好用,平常用处可能不大,但是结合 React 就很 ...
- react之高阶组件(二)
高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...
- react高阶组件的使用
为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...
- React进阶之高阶组件
前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...
- react高阶组件
高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...
- react高阶组件的理解
[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...
- 【转】react的高阶组件
React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
随机推荐
- DELL T110 II 系统安装总结
DELL T110 II 系统安装总结 1.RAID制作:https://jingyan.baidu.com/article/a3aad71ac4ce98b1fb0096bc.html 2.系统安装 ...
- react基础课程一简述JSX及目录关系
简述JSX及目录关系 简述:它被称为JSX,它是JavaScript的语法扩展,JSX是一种模板语言,但它具有JavaScript的全部功能.所以学习jsx还是需要学习基础的javaScript的. ...
- 第四次python作业——叶耀宗
设计题2: 1.参考“三国演义”词频统计程序,实现对红楼梦出场人物的频次统计.2.(可选)将红楼梦出场人物的频次统计结果用词云显示. import jieba excludes = {"什么 ...
- Android manifest文件中的标签详细介绍
官方文档 概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如:--为Java应用程序指定一个独一无二的名字 ...
- 【Henu ACM Round #13 E】Spy Syndrome 2
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对m个串建立一棵字典树. 然后对主串. 尝试从第一个位置开始.在字典树中尝试匹配 如果匹配到了位置i 就再从位置i+1开始尝试匹配 ...
- Jsp学习总结(1)——JSP九大内置对象和四种属性范围解读
一.四种属性范围 1.1.在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效 request:在一次服务请求范围内,服务器跳转后依然有效 session:-在一次会话范围内 ...
- Spring Cloud学习笔记【三】服务消费者Feign
Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...
- 数据结构——串的朴素模式和KMP匹配算法
一.朴素模式 假设我们要从主串S="goodgoogle"中找到子串T="google"的位置,步骤如下: i表示主串的当前位置下标,j表示子串的当前位置下标, ...
- golang binarySearch
func binarySearch(nodes []*node, word Text) (int, bool) { start := end := len(nodes) - // 特例: { // 当 ...
- Codefroces 415B Mashmokh and Tokens
B. Mashmokh and Tokens time limit per test 1 second memory limit per test 256 megabytes input standa ...