https://www.typescriptlang.org/docs/handbook/decorators.html

@装饰器/ @Decorator

https://www.typescriptlang.org/docs/handbook/decorators.html

使用高阶组件：

1. higherOrderComponent(WrappedComponent)

2. @higherOrderComponent

编写高阶组件：

1. 实现一个普通组件

2. 将普通组件使用函数包裹
   

装饰器  package.json--> scripts内eject   

    npm run eject

其中，使用装饰器模式需要安装两个依赖：

babel-preset-stage-2

babel-preset-react-native-stage-0

还需要配置.babelrc

{

"presets": ["react-native-stage-0/decorator-support"]

}

高阶组件使用的两种方式

使用装饰器

高阶组件

方式二，装饰器方式，开发步骤：

1、运行package.json运行eject脚本，暴露输出配置项

2、安装依赖

cpnm i -D babel-preset-stage-2

cpnm i -D babel-preset-react-native-stage-0

3、根目录新建.babelrc文件

{

"presets":["react-native-stage-0/decorator-support"]

}

4、export default d(B)改成B

并直接在class上写上@d注解

高阶组件是一个可以包裹返回class的函数

方式一，函数方式，开发步骤：

1、写一个函数d，用wrappedComponent作为参数；返回class，class的内部使用wrappedComponent

2、export default 函数名d

3、在使用处用高阶组件包裹导出，export default a(A组件)

添加 .babelrc

使用装饰器所需的依赖

creat-react-app模板中有 eject 命令可以把配置项输出

使用@装饰器

在create-react-app中使用装饰器

方式一：函数

方式二：装饰器

使用装饰器模式的配置

使用高阶组件

编写高阶组件