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 寫一個預載入資料的裝飾器