這邊會希望做為自己的筆記,所以我會把網路上的資料透過自己的統整後簡短的列下來,希望除了介紹 React 是什麼以外也能幫助大家理解一下 React 的原理。
Decorator 是一個典型的 AOP(Aspect-Oriented-Programming) 應用,HOC 的概念跟他很像,基本上是相輔相成的東西,不了解 HOC 的朋友可以稍微看看這篇的介紹。
下面以 React-redux 的 connect 作為範例,來看一下 HOC 與 Decorator
React 文檔內提到關於 HOC 的定義 :
HOC 就是一個函式,該函式接受一個 React.Component(Wrapped) 作為參數,且回傳一個新的 React.Component(Enhanced)
實作 HOC 時有一點很重要,盡量要確保不會因為操作而破壞原有的 WrappedComponent。