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

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

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

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

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

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

整體思路

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

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

這是對(duì)原書(shū)代碼稍加修改的SearchInput原子組件，因?yàn)闆](méi)加Icon，所以改了一下（逃），整體思路不變。原子組件沒(méi)什么可說(shuō)的，木偶組件就是接收props來(lái)實(shí)現(xiàn)功能，是對(duì)view層邏輯的抽象。

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

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ù)/交互邏輯抽象出來(lái)進(jìn)行了處理，view的邏輯還是交由原子組件來(lái)實(shí)現(xiàn)，可以看到最后的render渲染的還是wrappedComponent，只不過(guò)是在經(jīng)過(guò)Decorator之后多了幾個(gè)props，這些props的中有鉤子函數(shù)，有要傳遞給原子組件的參數(shù)。

這樣，視圖邏輯就由view層抽象，交互/業(yè)務(wù)邏輯由Decorator來(lái)抽象。

組合組件

先上代碼。

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

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

當(dāng)我們業(yè)務(wù)邏輯變得復(fù)雜的時(shí)候，不要去增加Decorator的復(fù)雜度，而是去拼接多個(gè)Decorator再通過(guò)組合組件去處理具體的業(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"
      />
    )
  }
}

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

tips

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

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

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

參考資料

深入react 技術(shù)棧

基于Decorator的組件擴(kuò)展實(shí)踐

精讀 React 高階組件

深入理解 React 高階組件

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