基于Decorator的React高階組件的思路分析與實現

LinkedME2016 發布于2019-08-21 17:31 / 3357人閱讀

摘要：在深入技術棧一書中，提到了基于的。書里對基于的沒有給出完整的實現，在這里實現并記錄一下實現的思路。在這里最小的組件就是。對比范式與父組件的范式，如果完全利用來實現的，將操作與分離，也未嘗不可，但卻不優雅。

在深入react 技術棧一書中，提到了基于Decorator的HOC。而不是直接通過父組件來逐層傳遞props，因為當業務邏輯越來越復雜的時候，props的傳遞和維護也將變得困難且冗余。

書里對基于Decorator的HOC沒有給出完整的實現，在這里實現并記錄一下實現的思路。

整個實現的代碼放到了我的Github上，是用來獲取豆瓣的電影列表的，npm start即可開箱。

整體思路

書里描述的整體思路，先將整個組件，按照view邏輯抽象為互不重疊的最小的原子組件，使組件間組合更自由。在這里最小的組件就是SearchInput SelectInput List。原子組件一定是純粹的、木偶式的組件，如果他們自身帶有復雜的交互/業務邏輯，那么在組合起來以后可想需要修改多少個原子組件，也就失去了相對配置式的優勢。

組件實現 原子組件

這是對原書代碼稍加修改的SearchInput原子組件，因為沒加Icon，所以改了一下（逃），整體思路不變。原子組件沒什么可說的，木偶組件就是接收props來實現功能，是對view層邏輯的抽象。

需要一提的是displayName，是用來確定組件的『身份』的，會被包裹它的組合組件用到，后面會提到組合組件。

export default class SearchInput extends PureComponent {
  static displayName = "SearchInput"

  render() {
    const { onSearch, placeholder } = this.props
    return (
      
        SearchSelect
        
          
        
      
    )
  }
}

Decorator組件

先放代碼

const searchDecorator = WrappedComponent => {
  class SearchDecorator extends Component {
    constructor(props) {
      super(props)
      this.handleSearch = this.handleSearch.bind(this)
      this.state = {
        keyword: ""
      }
    }

    handleSearch(e) {
      this.setState({
        keyword: e.target.value
      })
      this.props.onSearch(e)
    }

    render() {
      const { keyword } = this.state

      return (
        
      )
    }
  }

Decorator的作用就是將業務/交互邏輯抽象出來進行了處理，view的邏輯還是交由原子組件來實現，可以看到最后的render渲染的還是wrappedComponent，只不過是在經過Decorator之后多了幾個props，這些props的中有鉤子函數，有要傳遞給原子組件的參數。

這樣，視圖邏輯就由view層抽象，交互/業務邏輯由Decorator來抽象。

組合組件

先上代碼。

export default class Selector extends Component {
  render() {
    return (
      
        {
          this.props.children.map((item) => {
            // SelectInput
            if (item.type.displayName === "SelectInput") {
              ...
            }
            // SearchInput
            if (item.type.displayName === "SearchInput") {
              return React.cloneElement(item,
                {
                  key: "searchInput",
                  onSearch: this.props.onSearch,
                  placeholder: this.props.searchPlaceholder
                }
              )
            }
            // List
            if (item.type.displayName === "List") {
              ...
          })
        }
      
    )
  }
}

組合組件的children為根據不同業務需要包裹起來的原子組件，組合組件的邏輯處理功能來自于Decorator，各種Decorator的鉤子函數或者參數作為props傳遞給了Selector，Selector再用它們去完成原子組件之間的交互。組合組件通過之前提到的displayName為不同的原子組件分配props并根據業務需要進行組件間邏輯交互的調整。

一個 Decorator 只做最簡單的邏輯，只是給組件增加一個原子的智能特性。業務組件通過組織和拼接 Decorator 來實現功能，而不是改變 Decorator 本身的邏輯。

當我們業務邏輯變得復雜的時候，不要去增加Decorator的復雜度，而是去拼接多個Decorator再通過組合組件去處理具體的業務邏輯，這樣能保證Decorator的可復用性。

業務組件

const FinalSelector = compose(asyncSelectDecorator, selectedItemDecorator, searchDecorator)(Selector)

class SearchSelect extends Component {
  render() {
    return (
      
        
        
        
      
    )
  }
}

class App extends Component {
  render() {
    return (
       { console.log(`自定義onSearch: ${e.target.value}`) }}
        onClick={(text) => { console.log(`自定義onClick: ${text}`) }}
        url="/v2/movie/in_theaters"
      />
    )
  }
}

通過compose賦予組合組件不同的邏輯處理功能，然后根據業務需要讓compose后的組合組件包含原子組件，最后給從最外層傳遞參數就完成了。

tips

在實際的場景中也不能濫用HOC，基于Decorator的HOC一般是用來處理偏數據邏輯的部分，而DOM相關的東西就直接簡單粗暴的用父組件就好了。

對比 HOC 范式 compose(render)(state) 與父組件（Parent Component）的范式 render(render(state))，如果完全利用 HOC 來實現 React 的 implement，將操作與 view 分離，也未嘗不可，但卻不優雅。HOC 本質上是統一功能抽象，強調邏輯與 UI 分離。但在實際開發中，前端無法逃離 DOM ，而邏輯與 DOM 的相關性主要呈現 3 種關聯形式：

與 DOM 相關，建議使用父組件，類似于原生 HTML 編寫

與 DOM 不相關，如校驗、權限、請求發送、數據轉換這類，通過數據變化間接控制 DOM，可以使用 HOC 抽象

交叉的部分，DOM 相關，但可以做到完全內聚，即這些 DOM 不會和外部有關聯，均可

參考資料

深入react 技術棧

基于Decorator的組件擴展實踐

精讀 React 高階組件

深入理解 React 高階組件

云服務器 GPU云服務器基于webrtc的電話回聲消除的研究與實現基于webrtc的視頻會議系統的設計與實現基于防火墻技術的校園網絡安全設計與實現數據分析的思路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89607.html

學習es7的Decorator(順帶寫個react高階組件)

摘要：為了代碼進一步解耦，可以考慮使用高階組件這種模式。開源的高階組件使用提供了一系列使用的高階組件，可以增強組件的行為，可以利用此庫學習高階組件的寫法。通過使用此庫提供的高階組件，可以方便地讓列表元素可拖動。 1. Decorator基本知識在很多框架和庫中看到它的身影，尤其是React和Redux，還有mobx中，那什么是裝飾器呢。修飾器（Decorator）是一個函數，用來修改類的...

xiyang 2019-08-23 12:32 評論0 收藏0
基于Decorator的組件擴展實踐

摘要：在業務統一的情況下，僅僅修改組件用于配置的就可以滿足業務需求。避免了復雜的圖表配置，而將圖表進行有效拆分，通過聲明式的標簽進行組合，從而使圖表更具擴展性。而對于顆粒度最細的組件，我們希望它是純粹的，木偶式的組件。在前端業務開發中，組件化已經成為我們的共識。沉淀和復用組件，是提高開發效率的利器。但在組件復用的過程中，我們往往會遇到這樣的問題，組件相似，卻在結構或交互上有些許差別，需要對...

魏明 2019-08-20 10:19 評論0 收藏0
深入淺出React高階組件

摘要：博客地址背景知識在開始講述高階組件前，我們先來回顧高階函數的定義接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。博客地址：http://www.luckyjing.com/post... 背景知識在開始講述高階組件前，我們先來回顧高階函數的定義：接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。對于高階組件，它描述的便是接受React組件作為輸入，輸出...

yuanzhanghu 2019-08-20 18:20 評論0 收藏0
react進階漫談

摘要：父組件向子組件之間非常常見，通過機制傳遞即可。我們應該聽說過高階函數，這種函數接受函數作為輸入，或者是輸出一個函數，比如以及等函數。在傳遞數據的時候，我們可以用進一步提高性能。本文主要談自己在react學習的過程中總結出來的一些經驗和資源，內容邏輯參考了深入react技術棧一書以及網上的諸多資源，但也并非完全照抄，代碼基本都是自己實踐，主要為平時個人學習做一個總結和參考。本文的關鍵...

neuSnail 2019-08-20 14:16 評論0 收藏0
react進階漫談

摘要：父組件向子組件之間非常常見，通過機制傳遞即可。我們應該聽說過高階函數，這種函數接受函數作為輸入，或者是輸出一個函數，比如以及等函數。在傳遞數據的時候，我們可以用進一步提高性能。本文主要談自己在react學習的過程中總結出來的一些經驗和資源，內容邏輯參考了深入react技術棧一書以及網上的諸多資源，但也并非完全照抄，代碼基本都是自己實踐，主要為平時個人學習做一個總結和參考。本文的關鍵...

wyk1184 2019-08-30 15:52 評論0 收藏0