脚本宝典收集整理的这篇文章主要介绍了用修饰器优雅的使用高阶组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
修饰器
什么是修饰器
一句话概括：接受一个类作为参数的函数，用来修改类的行为。
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true高阶组件
什么是高阶组件
一句话概括：接受一个组件作为参数，返回一个组件的函数。
e.g.
// Target 是一个组件，它作为参数传给了Hoc这个函数
function Hoc(Target) {
class Wrap extends Component {
render() {
return (
<div classname='wrap'>
<Target />
</div>
);
}
}
return Wrap;
}使用高阶组件
import Hoc from './Hoc';
class A extends Component {
render() {
return (
<div>
this is A
</div>
);
}
}
export default Hoc(A); //在这里调用一下Hoc让高阶组件接受其他参数
function Hoc(Target, className) {
class Wrap extends Component {
render() {
return (
<div className={className}>
<Target />
</div>
);
}
}
return Wrap;
}
//A.js
...
export default Hoc(A, 'wrap');修饰器 + 高阶组件
使用无参数的高阶组件
import Hoc from './Hoc';
//这这里@一下，A就会被当做参数传给Hoc
@Hoc
class A extends Component {
render() {
return (
<div>
this is A
</div>
);
}
}
export default A;使用带参数的高阶组件
改写一下修饰器
function Hoc(className) {
//因为修饰器是一个只接受一个参数的函数，所以我们返回一个函数出来，它才是修饰器也是高阶组件
//相当于执行 Hoc(className) 返回出来的才是修饰器
return (Target) => {
class Wrap extends Component {
render() {
return (
<div className={className}>
<Target />
</div>
);
}
}
return Wrap;
};
}
//A.js
@Hoc('wrap')
class A extends Component {
render() {
return (
<div>
this is A
</div>
);
}
}
export default A;
//等同于
class A extends Component {
render() {
return (
<div>
this is A
</div>
);
}
}
export default Hoc('wrap')(A);到这里不知道小伙伴们看懂了没有。
我们通常使用Hoc来做一些公共的逻辑，或者向子组件注入一些属性，结合上修饰器，我们可以让语法更加简洁，维护起来更加方便。
以上是脚本宝典为你收集整理的用修饰器优雅的使用高阶组件全部内容，希望文章能够帮你解决用修饰器优雅的使用高阶组件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。