ES6 —— 修饰器(decorator)的基本使用与实例

作用：修饰器用于简化高阶函数/高阶组件

安装：

npm install --save-dev @babel/plugin-proposal-decorators
npm i react-app-rewired -D
npm i customize-cra -D

新建js文件 config-overrides.js：

// config-overrides.js   （react脚手架的自定义配置文件）
  const {override,addDecoratorsLegacy,disableEsLint,useBabelRc,fixBabelImports} = require('customize-cra');
  module.exports = override(
       addDecoratorsLegacy(), 
       fixBabelImports('import',{ libraryName: "antd", style: "css" })
  )

例子：

// 修饰器修饰之后
@connect(state => ({ isLogin: state.userInfo.isLogin }), {
  userInfo: userInfoAction,
})

class Login extends Component {...
}

export default Login

//____________  上面和下面的代码实现功能是一样的   __________________

// 原先写法
class Login extends Component {...
}

export default connect(state => ({ 
isLogin: state.userInfo.isLogin }), {
  userInfo: userInfoAction,
})(Login)

官方例子：

// 修饰器修饰之后
@connect
class OneClass { ... }
function connect(target){
	target.name='js'
}

//——————上面和下面的代码实现功能是一样的——————————
// 原先写法
class OneClass { ... }
function connect(target){
	target.name='js'
}

OneClass = connect(OneClass)

总结：简化了高阶组件/高阶函数的封装，一定程度上精简了代码量。

官方参考链接：

react-app-rewired 2.x 使用customize-cra模块 customize-cra模块

修饰器: decorator.