学习es7的Decorator(顺带写个react高阶组件)
栏目: JavaScript · 发布时间: 6年前
内容简介:在很多框架和库中看到它的身影,尤其是React和Redux,还有mobx中,那什么是装饰器呢。修饰器(Decorator)是一个函数,用来修改类的行为。不是很理解这种抽象概念,还是看代码讲解实际些。但上面这样只传了一个Class作为参数不够灵活怎么办? 我们可以在外层套一个函数,只要最后返回的是一个Decorator即可,管你套多少个函数传多少个参数都无所谓。
在很多框架和库中看到它的身影,尤其是React和Redux,还有mobx中,那什么是装饰器呢。
修饰器(Decorator)是一个函数,用来修改类的行为。不是很理解这种抽象概念,还是看代码讲解实际些。
//定义一个函数,也就是定义一个Decorator,target参数就是传进来的Class。 //这里是为类添加了一个静态属性 function addAge(target) { target.age = 2; } //在Decorator后面跟着Class,Decorator是函数的话,怎么不是addAge(MyGeekjcProject)这样写呢? //我只能这样理解:因为语法就这样,只要Decorator后面是Class,默认就已经把Class当成参数隐形传进Decorator了(就是所谓的语法糖)。 @addAge class MyGeekjcProject {} console.log(MyGeekjcProject.age) // 2 复制代码
1.1 传参修饰类
但上面这样只传了一个Class作为参数不够灵活怎么办? 我们可以在外层套一个函数,只要最后返回的是一个Decorator即可,管你套多少个函数传多少个参数都无所谓。
function addAge(age) { return function(target) { target.age = age; } } //注意这里,隐形传入了Class,语法类似于addAge(2)(MyGeekjcProject) @testable(2) class MyGeekjcProject {} MyGeekjcProject.age // 2 @addAge(3) class MyGeekjcProject {} MyGeekjcProject.age // 3 复制代码
1.2 修饰类的属性
下面是修改类的prototype对象
function description(target) { target.prototype.url = 'https://www.geekjc.com'; } @description class MyGeekjcProject {} let geekjc = new MyGeekjcProject(); geekjc.url // https://www.geekjc.com 复制代码
概念大概理解了,修饰器不仅可以修饰类,还可以修饰类的属性
//假如修饰类的属性则传入三个参数,对应Object.defineProperty()里三个参数,具体不细说 //target为目标对象,对应为Class的实例 //name为所要修饰的属性名,这里就是修饰器紧跟其后的name属性 //descriptor为该属性的描述对象 //这里的Decorator作用是使name属性不可写,并返回修改后的descriptor function readonly(target, name, descriptor){ descriptor.writable = false; return descriptor; } class Person { @readonly name() { return `${this.first} ${this.last}` } } 复制代码
关于Object.defineProperty()可以看文章学习 Object.defineProperty
再看一个复杂的例子
//定义一个Class并在其add上使用了修饰器 class Math { @log add(a, b) { return a + b; } } //定义一个修饰器 function log(target, name, descriptor) { //这里是缓存旧的方法,也就是上面那个add()原始方法 var oldValue = descriptor.value; //这里修改了方法,使其作用变成一个打印函数 //最后依旧返回旧的方法,真是巧妙 descriptor.value = function() { console.log(`Calling "${name}" with`, arguments); return oldValue.apply(null, arguments); }; return descriptor; } const math = new Math(); math.add(2, 4); 复制代码
看完上面的代码就知道decorator有什么用了,修饰器不仅可以修饰类的行为,还可以修饰类的属性。
2. react高阶组件
更通俗地描述为,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced)的React组件,供其他组件调用。
3. 实现一个高阶组件
面我们来实现一个最简单的高阶组件(函数),它接受一个React组件,包裹后然后返回。
export default function withDescription(WrappedComponent) { return class HOC extends Component { render() { return <div> <div className="geekjc-description"> 极客教程(https://www.geekjc.com)致力于推广各种编程语言技术,也为了未来数字化世界,让人更容易找到操作数字化的方式,为了未来而生的编程学习平台, 大部分资源是完全免费的,并且会根据当前互联网的变化实时更新本站内容。 </div> <WrappedComponent {...this.props}/> </div> } } } 复制代码
在其他组件里,我们引用这个高阶组件,用来强化它。
@withDescription export default class Geekjc extends Component { render() { return ( <div> 我是一个普通组件 </div> ); } } 复制代码
在这里使用了 ES7
里的 decorator
(可以看第一节的Decorator),来提升写法上的优雅,但是实际上它只是一个语法糖,下面这种写法也是可以的。
const EnhanceDemo = withDescription(Geekjc); 复制代码
随后,观察React组件树发生了什么变化,如图所示,可以发现Geekjc组件被HOC组件包裹起来了,符合了高阶组件的预期,即组件是层层包裹起来的,如同洋葱一样。
但是随之带来的问题是,如果这个高阶组件被使用了多次,那么在调试的时候,将会看到一大堆 HOC
,所以这个时候需要做一点小优化,就是在高阶组件包裹后,应当保留其原有名称。
我们改写一下上述的高阶组件代码,增加了 getDisplayName
函数以及静态属性 displayName
,此时再去观察 DOM Tree
。
function getDisplayName(component) { return component.displayName || component.name || 'Component'; } export default function (WrappedComponent) { return class HOC extends Component { static displayName = `HOC(${getDisplayName(WrappedComponent)})` render() { return <div> <div className="geekjc-description"> 极客教程(https://www.geekjc.com)致力于推广各种编程语言技术,也为了未来数字化世界,让人更容易找到操作数字化的方式,为了未来而生的编程学习平台, 大部分资源是完全免费的,并且会根据当前互联网的变化实时更新本站内容。 </div> <WrappedComponent {...this.props}/> </div> } } } 复制代码
此时,原本组件的名称正确地显示在了 DOM Tree
上。
这个简单的例子里高阶组件只做了一件事,那便是 为被包裹的组件添加一个标题样式 。这个高阶组件可以用到任何一个需要添加此逻辑的组件上,只需要被此高阶组件修饰即可。
由此可以看出,高阶组件的主要功能是封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用。
4. 高阶组件的进阶用法
4.1 组件参数
还是以上述例子为例,此高阶组件仅仅只是展示了关于网站的描述,但是为了更好的抽象,此描述应当可以被参数化,如下方式调用。
@withDescription('欢迎大家访问收藏(https://www.geekjc.com)') export default class Geekjc extends Component { render() { return ( //... ); } } 复制代码
withDescription需要被改写成如下形式,它接受一个参数,然后返回一个高阶组件(函数)。
export default function (description) { return function (WrappedComponent) { return class HOC extends Component { render() { return <div> <div className="geekjc-description"> {description ?description : '我是描述'} </div> <WrappedComponent {...this.props}/> </div> } } } } 复制代码
使用ES6写法可以更加简洁。
export default(description) => (WrappedComponent) => class HOC extends Component { render() { return <div> <div className="geekjc-description"> {description ? description : '我是描述'} </div> <WrappedComponent {...this.props}/> </div> } } 复制代码
如图可以看到,传入的参数已经反映在DOM Tree里了。
柯里化 Curry 概念:只传递函数的一部分参数来调用它,让它返回一个函数去处理剩下的参数。 函数签名:fun(params)(otherParams) 应用:在React里,通过柯里化,我们可以通过传入不同的参数来得到不同的高阶组件。
4.2 基于属性代理的方式
属性代理是最常见的高阶组件的使用方式,上述描述的高阶组件就是这种方式。它通过做一些操作,将被包裹组件的props和新生成的props一起传递给此组件,这称之为属性代理。
export default function withHeader(WrappedComponent) { return class HOC extends Component { render() { const newProps = { test:'hoc' } // 透传props,并且传递新的newProps return <div> <WrappedComponent {...this.props} {...newProps}/> </div> } } } 复制代码
4.3 基于反向继承的方式
这种方式返回的React组件继承了被传入的组件,所以它能够访问到的区域、权限更多,相比属性代理方式,它更像打入组织内部,对其进行修改。具体的可以参考附录里提供的链接进行深入学习。
export default function (WrappedComponent) { return class Inheritance extends WrappedComponent { componentDidMount() { // 可以方便地得到state,做一些更深入的修改。 console.log(this.state); } render() { return super.render(); } } } 复制代码
4.4 组合多个高阶组件
上述高阶组件为React组件增强了一个功能,如果需要同时增加多个功能需要怎么做?这种场景非常常见,例如我既需要增加一个组件标题,又需要在此组件未加载完成时显示Loading。
@withDescription @withLoading class Demo extends Component{ } 复制代码
使用compose可以简化上述过程,也能体现函数式编程的思想。
const enhance = compose(withHeader,withLoading); @enhance class Demo extends Component{ } 复制代码
组合 Compose compose可以帮助我们组合任意个(包括0个)高阶函数,例如compose(a,b,c)返回一个新的函数d,函数d依然接受一个函数作为入参,只不过在内部会依次调用c,b,a,从表现层对使用者保持透明。 基于这个特性,我们便可以非常便捷地为某个组件增强或减弱其特征,只需要去变更compose函数里的参数个数便可。 compose函数实现方式有很多种,这里推荐其中一个recompact.compose,详情见下方参考类库,也可以看我之前写的一篇文章 reduce与redux中compose函数
5. 与父组件区别
高阶组件作为一个函数,它可以更加纯粹地关注业务逻辑层面的代码,比如数据处理,数据校验,发送请求等,可以改善目前代码里业务逻辑和UI逻辑混杂在一起的现状。父组件则是UI层的东西,我们先前经常把一些业务逻辑处理放在父组件里,这样会造成父组件混乱的情况。为了代码进一步解耦,可以考虑使用高阶组件这种模式。
6. 开源的高阶组件使用
6.1 recompact
recompact提供了一系列使用的高阶组件,可以增强组件的行为,可以利用此库学习高阶组件的写法。
import recompact from 'recompact' import { pure, withProps } from 'recompact' const enhance = recompact.compose( withProps({ className: 'beautiful' }), pure, ) @enhance class Demo extends Component{ } 复制代码
以上所述就是小编给大家介绍的《学习es7的Decorator(顺带写个react高阶组件)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python Algorithms
Magnus Lie Hetland / Apress / 2010-11-24 / USD 49.99
Python Algorithms explains the Python approach to algorithm analysis and design. Written by Magnus Lie Hetland, author of Beginning Python, this book is sharply focused on classical algorithms, but it......一起来看看 《Python Algorithms》 这本书的介绍吧!