基于Decorator的React高階組件的思路分析與實現(xiàn)

LinkedME2016 發(fā)布于2019-08-21 17:31 / 3366人閱讀

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

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

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

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

整體思路

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

組件實現(xiàn) 原子組件

這是對原書代碼稍加修改的SearchInput原子組件，因為沒加Icon，所以改了一下（逃），整體思路不變。原子組件沒什么可說的，木偶組件就是接收props來實現(xiàn)功能，是對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的作用就是將業(yè)務(wù)/交互邏輯抽象出來進行了處理，view的邏輯還是交由原子組件來實現(xiàn)，可以看到最后的render渲染的還是wrappedComponent，只不過是在經(jīng)過Decorator之后多了幾個props，這些props的中有鉤子函數(shù)，有要傳遞給原子組件的參數(shù)。

這樣，視圖邏輯就由view層抽象，交互/業(yè)務(wù)邏輯由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為根據(jù)不同業(yè)務(wù)需要包裹起來的原子組件，組合組件的邏輯處理功能來自于Decorator，各種Decorator的鉤子函數(shù)或者參數(shù)作為props傳遞給了Selector，Selector再用它們?nèi)ネ瓿稍咏M件之間的交互。組合組件通過之前提到的displayName為不同的原子組件分配props并根據(jù)業(yè)務(wù)需要進行組件間邏輯交互的調(diào)整。

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

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

業(yè)務(wù)組件

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賦予組合組件不同的邏輯處理功能，然后根據(jù)業(yè)務(wù)需要讓compose后的組合組件包含原子組件，最后給從最外層傳遞參數(shù)就完成了。

tips

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

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

與 DOM 相關(guān)，建議使用父組件，類似于原生 HTML 編寫
與 DOM 不相關(guān)，如校驗、權(quán)限、請求發(fā)送、數(shù)據(jù)轉(zhuǎn)換這類，通過數(shù)據(jù)變化間接控制 DOM，可以使用 HOC 抽象
交叉的部分，DOM 相關(guān)，但可以做到完全內(nèi)聚，即這些 DOM 不會和外部有關(guān)聯(lián)，均可

參考資料

深入react 技術(shù)棧

基于Decorator的組件擴展實踐

精讀 React 高階組件

深入理解 React 高階組件

云服務(wù)器 GPU云服務(wù)器基于webrtc的電話回聲消除的研究與實現(xiàn) 基于webrtc的視頻會議系統(tǒng)的設(shè)計與實現(xiàn) 基于防火墻技術(shù)的校園網(wǎng)絡(luò)安全設(shè)計與實現(xiàn) 數(shù)據(jù)分析的思路