阅读 2545

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
  }
}
复制代码

实战篇

文章分类
前端