亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

魏明 / 2488人閱讀

摘要：在業(yè)務(wù)統(tǒng)一的情況下，僅僅修改組件用于配置的就可以滿足業(yè)務(wù)需求。避免了復(fù)雜的圖表配置，而將圖表進(jìn)行有效拆分，通過聲明式的標(biāo)簽進(jìn)行組合，從而使圖表更具擴(kuò)展性。而對(duì)于顆粒度最細(xì)的組件，我們希望它是純粹的，木偶式的組件。

在前端業(yè)務(wù)開發(fā)中，組件化已經(jīng)成為我們的共識(shí)。沉淀和復(fù)用組件，是提高開發(fā)效率的利器。但在組件復(fù)用的過程中，我們往往會(huì)遇到這樣的問題，組件相似，卻在結(jié)構(gòu)或交互上有些許差別，需要對(duì)組件進(jìn)行改造方可滿足需求。這個(gè)問題之前在 React實(shí)踐 - Component Generator 就有所提及。

之初，我們提出了組件配置式。在業(yè)務(wù)統(tǒng)一的情況下，僅僅修改組件用于配置的props就可以滿足業(yè)務(wù)需求。但隨著業(yè)務(wù)發(fā)生變化導(dǎo)致組件形態(tài)發(fā)生變化時(shí)，我們就必須不斷增加配置去應(yīng)對(duì)變化，便會(huì)出現(xiàn)配置泛濫，而在擴(kuò)展過程中又必須保證組件向下兼容，只增不減，使組件可維護(hù)性的降低。

最近的項(xiàng)目開發(fā)中，@JasonHuang 提出了組件組合式開發(fā)思想，有效地解決了配置式所存在的一些問題。下面我將詳細(xì)闡述其思想與具體實(shí)現(xiàn)。

組件再分離

對(duì)于組件的 view 層，我們期望組件是沒有冗余的，組件與組件間 view 重疊的部分應(yīng)當(dāng)被抽離出來，形成顆粒度更細(xì)的組件，使組件組合產(chǎn)生更多的可能。

這種 view 細(xì)化的組合式思想早已在我們團(tuán)隊(duì)可視化庫 Recharts 中有所體現(xiàn)。Recharts 避免了復(fù)雜的圖表配置，而將圖表進(jìn)行有效拆分，通過聲明式的標(biāo)簽進(jìn)行組合，從而使圖表更具擴(kuò)展性。

同樣，我們?cè)诮M件上也希望秉承這種思想，先來看一下在現(xiàn)有業(yè)務(wù)比較典型的三個(gè)公共組件:

這三個(gè)組件無論在 UI 還是邏輯上均存在一定共性。在配置式中，我們會(huì)將這三個(gè)組件通過一個(gè)組件的配置變換來實(shí)現(xiàn)，但無疑會(huì)提高單個(gè)組件內(nèi)部邏輯的復(fù)雜性。

再做一次分離！它們可由 SelectInput、SearchInput 與 List 三個(gè)顆粒度更細(xì)的組件來組合。而對(duì)于顆粒度最細(xì)的組件，我們希望它是純粹的，木偶式的組件。

例如 SelectInput 組件，組件狀態(tài)完全依賴傳入的 props，包括 selectedItem (顯示用戶所選項(xiàng))、isActive (當(dāng)前下拉狀態(tài))、onClickHeader (反饋下拉狀態(tài))以及placeholder (下拉框提示)。我們來看一下它的簡要實(shí)現(xiàn):

class SelectInput extends Component {
  static displayName = "SelectInput";
  
  render() {
    const { selectedItem, isActive, onClickHeader, placeholder } = this.props;
    const { text } = selectedItem || {};
    return (
      

        
        
      

    );
  }
}

當(dāng)組件被再次分離后，我們可以根據(jù)業(yè)務(wù)中的組件形態(tài)對(duì)其進(jìn)行任意組合，形成統(tǒng)一層，擺脫在原有組件上擴(kuò)展的模式，有效提高組件的靈活性。

邏輯再抽象

那么有了 view 細(xì)化再重組的公共組件后，是不是就可以愉快地開發(fā)了?

是的，但組件層面的抽象不應(yīng)該只停留在 view 層面，組件中的相同交互邏輯和業(yè)務(wù)邏輯也應(yīng)該進(jìn)行抽象。

ReactEurope 2016 小記 - 上 中提到復(fù)用高階函數(shù)的思想，編寫 Higher-Order Components (高階組件)來為基礎(chǔ)組件增加新的功能。

Higher-Order Components = Decorators + Components。在我們的組件中，也正是貫穿著這樣函數(shù)式的思想，來完成組件邏輯上的抽象，例如:

// 完成SearchInput與List的交互
const SearchDecorator = Wrapper => {
  class WrapperComponent extends Component {
    handleSearch(keyword) {
      this.setState({
        data: this.props.data,
        keyword,
      });
      this.props.onSearch(keyword);
    }

    render() {
      const { data, keyword } = this.state;
      return (
        
      );
    }
  }
  
  return WrapperComponent;
};

// 完成List數(shù)據(jù)請(qǐng)求
const AsyncSelectDecorator = Wrapper => {
  class WrapperComponent extends Component {
    componentDidMount() {
      const { url } = this.props;
      
      fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          data,
        });
      });
    }

    render() {
      const { data } = this.state;
      return (
        
      );
    }
  }

  return WrapperComponent;
}

擁有 Decorator 之后，我們就能賦予組件能力了，例如合成 Search 組件:

@SearchDecorator
class Search extends Component {
  render() {
    return (
      
        
        
      
    );
  }
}

那么當(dāng)我們將邏輯抽象成為多個(gè) Decorator 時(shí)，又該如何去組合呢？你是否還記得 React Mixin 的前世今生 中提到的方法？沒錯(cuò)，就是compose！這里建議讀者 review 這篇文章，順便回顧一下Mixin與高階組件的不同點(diǎn)。

// SelectedItemDecorator為List與SelectInput的交互，讀者可以自行嘗試實(shí)現(xiàn)
const FinalSelector = compose(AsyncSelectDecorator, SearchDecorator, SelectedItemDecorator)(Selector);

class SearchSelect extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}
小結(jié)

在配置式組件內(nèi)部，組件與組件間以及組件與業(yè)務(wù)間是緊密關(guān)聯(lián)的，而對(duì)于開發(fā)人員而言需要完成的僅僅是配置的工作。而組合式意圖打破這種關(guān)聯(lián)，尋求單元化，通過顆粒度更細(xì)的基礎(chǔ)組件與抽象組件共有交互與業(yè)務(wù)邏輯的 Decorator，使組件更靈活，更易擴(kuò)展，也使開發(fā)者能夠完成對(duì)于基礎(chǔ)組件的自由支配。

雖然組合式確實(shí)能解決配置式所存在的一些問題，但多層 Decorator 帶來的多層包裹，會(huì)對(duì)組件理解和調(diào)試造成一定困難，也"不能"使用外部公有的方法。同時(shí)組合式所基于的函數(shù)式編程的思想能否被整個(gè)團(tuán)隊(duì)所接受，也是我們需要考量的問題。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80088.html

相關(guān)文章

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

    摘要：在深入技術(shù)棧一書中，提到了基于的。書里對(duì)基于的沒有給出完整的實(shí)現(xiàn)，在這里實(shí)現(xiàn)并記錄一下實(shí)現(xiàn)的思路。在這里最小的組件就是。對(duì)比范式與父組件的范式，如果完全利用來實(shí)現(xiàn)的，將操作與分離，也未嘗不可，但卻不優(yōu)雅。 在深入react 技術(shù)棧一書中，提到了基于Decorator的HOC。而不是直接通過父組件來逐層傳遞props，因?yàn)楫?dāng)業(yè)務(wù)邏輯越來越復(fù)雜的時(shí)候，props的傳遞和維護(hù)也將變得困難且冗...

    LinkedME2016 評(píng)論0 收藏0

  • 裝飾模式（Decorator Pattern）

    摘要：通常有兩種方式可以實(shí)現(xiàn)給一個(gè)類或?qū)ο笤黾有袨槔^承機(jī)制，使用繼承機(jī)制是給現(xiàn)有類添加功能的一種有效途徑，通過繼承一個(gè)現(xiàn)有類可以使得子類在擁有自身方法的同時(shí)還擁有父類的方法。 裝飾模式 (Decorator Pattern) 裝飾模式能夠?qū)崿F(xiàn)動(dòng)態(tài)的為對(duì)象添加功能，是從一個(gè)對(duì)象外部來給對(duì)象添加功能。通常有兩種方式可以實(shí)現(xiàn)給一個(gè)類或?qū)ο笤黾有袨椋? 繼承機(jī)制，使用繼承機(jī)制是給現(xiàn)有類添加功能的一種...

    gityuan 評(píng)論0 收藏0

  • 設(shè)計(jì)模式之裝飾者模式

    摘要：相關(guān)設(shè)計(jì)模式裝飾者模式和代理模式裝飾者模式關(guān)注再一個(gè)對(duì)象上動(dòng)態(tài)添加方法代理模式關(guān)注再對(duì)代理對(duì)象的控制訪問，可以對(duì)客戶隱藏被代理類的信息裝飾著模式和適配器模式都叫包裝模式關(guān)于新職責(zé)適配器也可以在轉(zhuǎn)換時(shí)增加新的職責(zé)，但主要目的不在此。 0x01.定義與類型 定義：裝飾模式指的是在不必改變?cè)愇募褪褂美^承的情況下，動(dòng)態(tài)地?cái)U(kuò)展一個(gè)對(duì)象的功能。它是通過創(chuàng)建一個(gè)包裝對(duì)象，也就是裝飾來包裹真實(shí)的...

    chuyao 評(píng)論0 收藏0

  • Vue with typescript

    摘要：想要使用語法的話，配合，這個(gè)插件，體驗(yàn)更佳，這個(gè)插件在語法中實(shí)現(xiàn)了。這種方式最接近的單文件組件的寫法，如果一個(gè)完善項(xiàng)目從改成，用這種方法很快，只要加上和一些必要的變量類型就好了，然后用包裹就好。不推薦混入用這種方式寫，無法實(shí)現(xiàn)多繼承。 最近嘗試了一下 TypeScript，試著把一個(gè) Vue 項(xiàng)目改成了 TypeScript 的，感覺還不錯(cuò) 目前 Vue 和 TypeScript 的配...

    JerryWangSAP 評(píng)論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 Node.js 篇

    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。對(duì)該漏洞的綜合評(píng)級(jí)為高危。目前，相關(guān)利用方式已經(jīng)在互聯(lián)網(wǎng)上公開，近期出現(xiàn)攻擊嘗試爆發(fā)的可能。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡...

    kid143 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

魏明

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<