react 理解装饰器

说明

react 初学者
es6 初学者，对装饰模式有一定了解和使用

react 装饰器的使用

看看装饰模式

Decorator模式并不严重依赖于创建对象的方式，而是关注扩展其额外功能。我们使用了一个单一的基本对象并逐步添加提供额外功能的Decorator对象，而不是仅仅依赖于原型继承。这个想法是：向基本对象添加属性或者方法，而不是进行子类化，因此它较为精简。

react 在 redux 中使用装饰器来写 connect

通常情况下我们需要一个 reducer 和一个 action 来包裹你的 Component。
假如你已经有一个 key 为 main 的 reducer 和一个 action.js。我们的 App.js 一般这样写：

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

class App extends React.Component{
  render(){
    return <div>hello</div>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

使用装饰器@

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

@connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
  render(){
    return <div>hello</div>
  }
}

合理的压缩了代码

当然我们每次需要使用 action 和 reducer，还得写这么多，我们再把 connect 抽离出来

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

export default connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)

我们在组件中的这么去使用

import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'

@connect
export default class App extends React.Component{
  render(){
    return <div>hello</div>
  }
}

配置一下装饰器

需要说明的是，这里用了装饰器，需要安装模块babel-plugin-transform-decorators-legacy，然后在babel中配置：

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}

如果你用的是vscode, 可以在项目根目录下添加jsconfig.json文件来消除代码警告：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

实战篇

理解了装饰器，我们动手来写一个
react 写一个预加载数据的装饰器