修饰器
什么是修饰器
@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来做一些公共的逻辑,或者向子组件注入一些属性,结合上修饰器,我们可以让语法更加简洁,维护起来更加方便。