修饰器&高阶组件
一、修饰器
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,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
随机推荐
- java中锁的理解
在并发编程中,经常遇到多个线程访问同一个 共享资源 ,这时候作为开发者必须考虑如何维护数据一致性,在java中synchronized关键字被常用于维护数据一致性.synchronized机制是给共享 ...
- Django_视图操作
- or in 、Object.keys()以及Object.getOwnPropertyNames有什么区别?
or in .Object.keys()以及Object.getOwnPropertyNames的区别 var obj= Object.create(parent, { b: { value: 2, ...
- CCF模拟题 相反数
相反数 时间限制: 1.0s 内存限制: 256.0MB 问题描述 有 N 个非零且各不相同的整数.请你编一个程序求出它们中有多少对相反数(a 和 -a 为一对相反数). 输入格式 第一行包含一个 ...
- 洛谷——P1518 两只塔姆沃斯牛 The Tamworth Two
https://www.luogu.org/problem/show?pid=1518 题目背景 题目描述 两只牛逃跑到了森林里.农夫John开始用他的专家技术追捕这两头牛.你的任务是模拟他们的行为( ...
- 洛谷 P2913 [USACO08OCT]车轮旋转Wheel Rotation
P2913 [USACO08OCT]车轮旋转Wheel Rotation 题目描述 Farmer John has an old-time thresher (wheat harvester) tha ...
- hdu(2859)——Phalanx(dp)
题意: 如今有一个n*n的矩阵,然后每一个格子中都有一个字母(大写或小写组成).然后询问你如今最大的对称子矩阵的边长是多少.注意这里的对角线是从左下角到右上角上去的. 思路: 这道题我自己写出了dp的 ...
- HBase 数据库检索性能优化策略
HBase 数据表介绍 HBase 数据库是一个基于分布式的.面向列的.主要用于非结构化数据存储用途的开源数据库.其设计思路来源于 Google 的非开源数据库"BigTable" ...
- ASPNET 页面编码
转自:http://www.cnblogs.com/libingql/archive/2009/04/11/1433771.html 设置ASPNET页面编码格式 1.Web.Config设置 < ...
- c++值传递,指针传递,引用传递以及指针与引用的区别
值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值.从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入, 不能传出.当函数内部需要修改参数,并且不希望这个改变影 ...