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 寫一個預加載數據的裝飾器