一、裝飾器

1、什麼是裝飾器

　　Decorator 是 ES7 的一個新語法，他可以對一些物件進行裝飾包裝，然後返回一個被包裝過的物件。

　　可以裝飾的物件包括：類，屬性，方法等。打個比方：你出去玩，出門前戴了一頂帽子，這是帽子就是裝飾器，你自己就是被裝飾的物件。

2、裝飾器的作用

　　裝飾器的作用就是為已經存在的函式或物件新增額外的功能。

　　裝飾器應用場景及理解: 裝飾器本質上是一個函式,它可以讓其他函式在不需要做任何程式碼變動的前提下增加額外功能。它經常用於有切面需求的場景,比如:插入日誌、效能測試、事務處理、快取、許可權校驗等場景。

3、類裝飾器

　　這裡主要介紹一下類裝飾器，使用類裝飾器可以減少一些程式碼的重複編寫。此時裝飾器看起來更像是一個父類，但它又不是一個父類，因為被裝飾的類重寫一些生命週期函式的時候，裝飾器裡面的生命週期函式並不會被覆蓋執行。

　　對於componentDidMount來說，先執行被裝飾類的componentDidMount，再執行裝飾器內的componentDidMount；

　　對於componentWillUnmount來講，先執行裝飾器的componentWillUnmount，再執行被裝飾的類的componentWillUnmoun。

二、程式碼示例

　　修飾器（Decorator）是一個函式，用來修改類的行為。不是很理解這種抽象概念，還是看程式碼講解實際些。

1、修飾類

//定義一個函式，也就是定義一個Decorator，target引數就是傳進來的Class。
//這裡是為類添加了一個靜態屬性
function testable(target) {
  target.isTestable 
 
= true;
}

//在Decorator後面跟著Class，Decorator是函式的話，怎麼不是testable(MyTestableClass)這樣寫呢？
//我只能這樣理解：因為語法就這樣，只要Decorator後面是Class，預設就已經把Class當成引數隱形傳進Decorator了。
@testable
class MyTestableClass {}

console.log(MyTestableClass.isTestable) // true

　　我覺得就是為了參考 Java 註解的寫法吧，哈哈

　　但上面這樣只傳了一個Class作為引數不夠靈活怎麼辦？我們可以在外層套一個函式，只要最後返回的是一個Decorator即可，管你套多少個函式傳多少個引數都無所謂。

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

//注意這裡，隱形傳入了Class，語法類似於testable(true)(MyTestableClass)
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

　　下面是修改類的prototype物件

function testable(target) {
  target.prototype.isTestable = true;
}

@testable
class MyTestableClass {}

let obj = new MyTestableClass();
obj.isTestable // true

2、修飾屬性

　　概念大概理解了，修飾器不僅可以修飾類，還可以修飾類的屬性

//假如修飾類的屬性則傳入三個引數，對應Object.defineProperty()裡三個引數，具體不細說
//target為目標物件，對應為Class的例項
//name為所要修飾的屬性名，這裡就是修飾器緊跟其後的name屬性
//descriptor為該屬性的描述物件
//這裡的Decorator作用是使name屬性不可寫，並返回修改後的descriptor
function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

　　再看一個複雜的例子

//定義一個Class並在其add上使用了修飾器
class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

//定義一個修飾器
function log(target, name, descriptor) {
  //這裡是快取舊的方法，也就是上面那個add()原始方法
  var oldValue = descriptor.value;

  //這裡修改了方法，使其作用變成一個列印函式
  //最後依舊返回舊的方法，真是巧妙
  descriptor.value = function() {
    console.log(`Calling "${name}" with`, arguments);
    return oldValue.apply(null, arguments);
  };

  return descriptor;
}

const math = new Math();
math.add(2, 4);

三、裝飾器在React中的應用

//假如有這麼一個頁面元件，用於顯示使用者資料的，當從Home元件進去到這個元件時
//希望title從“Home Page”變成“Profile Page”
//注意這裡隱形傳入了元件，語法類似setTitle('Profile Page')(Profile)
@setTitle('Profile Page')
class Profile extends React.Component {
    //....
}

//開始定義裝飾器
//看到兩個箭頭函式感覺懵逼了，轉化一個也就是一個函式裡返回一個函式再返回一個元件包裹器而已
//title引數對應上面的“Profile Page”字串
//WrappedComponent引數對應上面的Profile元件
//然後在元件載入完修改了title，在返回一個新元件，是不是很像高階元件呢
const setTitle = (title) => (WrappedComponent) => {
   return class extends React.Component {
      componentDidMount() {
          document.title = title
      }
      render() {
         return <WrappedComponent {...this.props} />
      }
   }
}

　　最後看看現在react-redux中怎麼應用裝飾器的

//定義一個元件
class Home extends React.Component {
    //....
}

//以往從狀態樹取出對應的資料，讓後通過props傳給元件使用通過react-redux自帶的connect()方法
export default connect(state => ({todos: state.todos}))(Home);

//使用裝飾器的話就變成這樣，好像沒那麼複雜
@connect(state => ({ todos: state.todos }))
class Home extends React.Component {
    //....
}