react hook 如何使用装饰器？

Question

使用装饰器前:

const A = (peops) => {...}

export default connect(state => ({
  gData: state.gData,
}))(A);

使用装饰器后:

@connect(state => ({
  gData: state.gData,
}))
const A = (peops) => {...}
export default A

使用装饰器后的写法会报错，请问如何修正？

如果是 class 组件则正常不报错

Answer 1

装饰器只能用于类和类的属性、方法，不能用于函数，因为存在函数提升。类是不会提升的。这里有一个例子：

var counter = 0; 

var add = function () { counter++; }; 

@add 
function foo() { }

上面的代码，意图是执行后counter等于1，但是实际上结果是counter等于0。因为函数提升，使得实际执行的代码是下面这样：

@add 
function foo() { } 

var counter; 
var add; 
counter = 0; 
add = function () { counter++; };

另外，使用装饰器语法需要使用对应的 babel 插件。

参考：http://www.fly63.com/article/...

Answer 2

我记得@装饰器只能作用在类或者类的方法上面的，不能用在函数上，因为存在函数提升