成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React組件設(shè)計(jì)模式-組合組件

Jonathan Shieber / 2442人閱讀

摘要：組件有兩個(gè)關(guān)鍵的表明當(dāng)前是否應(yīng)高亮，自己被點(diǎn)擊時(shí)調(diào)用的回調(diào)函數(shù)，由于是每個(gè)頁面的容器，它只負(fù)責(zé)把渲染出來，所以用函數(shù)式組件即可。

這種模式本質(zhì)上解決的是組件之間傳值的問題。但是它對于傳值以及一些內(nèi)部操控的邏輯封裝得更嚴(yán)密。

場景：希望減少上下級(jí)組件之間props的傳遞，簡單來說就是不用傳做顯式地傳值，來達(dá)到組件之間相互通信的目的

舉例來說，某些界面中應(yīng)該有Tabs這樣的組件，由Tab和TabItem組成，點(diǎn)擊每個(gè)TabItem，該TabItem會(huì)高亮，
那么Tab和TabItem自然要進(jìn)行溝通。很自然的寫法是像下面這樣

One
Two
Three

這樣的缺點(diǎn)很明顯：

每次使用 TabItem 都要傳遞一堆 props

每增加一個(gè)新的 TabItem，都要增加對應(yīng)的 props

如果要增加 TabItem，就要去修改 Tabs 的 JSX 代碼

但是，組件之間的交互我們又不希望通過props或者context來實(shí)現(xiàn)。希望用法如下面一樣簡潔。

    
      第一
      第二
      第三

組件之間通過隱秘的方式進(jìn)行通信，但這里的隱秘實(shí)際上是對props的操作在一個(gè)地方進(jìn)行管理。

實(shí)現(xiàn)

明白了要實(shí)現(xiàn)的交互，和代碼層面要實(shí)現(xiàn)的效果，就可以開始動(dòng)手了。

TabItem組件有兩個(gè)關(guān)鍵的props: active（表明當(dāng)前是否應(yīng)高亮），onTabClick（自己被點(diǎn)擊時(shí)調(diào)用的回調(diào)函數(shù)），
TabItem由于是每個(gè)Tab頁面的容器，它只負(fù)責(zé)把props.children渲染出來，所以用函數(shù)式組件即可。

export const TabItem = props => {
  const { active, onTabClick, children } = props
  const style = {
    color: active ? "red" : "green",
    cursor: "pointer"
  }
  return <>
    

      {children}
    

  
}

我們再來回顧一下想到達(dá)到的效果：

    
      第一
      第二
      第三

使用組件時(shí)要避免傳遞props的缺點(diǎn)，那么在哪里傳遞呢？自然是是Tabs組件。但上面并沒有傳入props啊。
Tabs 雖然可以訪問到props里邊的children，但是到手的children已經(jīng)是現(xiàn)成的如果直接改它的話，會(huì)出問題。
不可以直接改children的話，我們就把children復(fù)制一份，然后改這個(gè)復(fù)制過來的children，再渲染出去，就ok啦！

下面來看Tabs的實(shí)現(xiàn)：

class Tabs extends React.Component {
  state={
    activeIndex: 0
  }
  render() {
    const { activeIndex } = this.state
    const newChildren = React.Children.map(this.props.children, (child, index) => {
      if (child.type) {
          // 復(fù)制并修改children
        return React.cloneElement(child, {
          active: activeIndex === index,
          onTabClick: () => this.setState({activeIndex: index})
        })
      } else {
        return child
      }
    })
    return 

      {newChildren}
    

  }
}

這里需要用到React不常用的api：

React.Children.map

React.cloneElement

使用React.Children.map來對props.children進(jìn)行遍歷。

而React.cloneElement可以復(fù)制某個(gè)元素，第一個(gè)參數(shù)是被復(fù)制的元素，第二個(gè)參數(shù)我們可以把想傳入的props加進(jìn)去，也就是這個(gè)時(shí)機(jī)，
我們將active和onTabClick傳入。實(shí)現(xiàn)最終效果。

總結(jié)

這種模式比較好的把復(fù)雜邏輯完全封裝起來了，抽象程度更好，比較適合開發(fā)組件開發(fā)者。針對props的擴(kuò)展性也比較好，對于使用組件的開發(fā)者來說，也比較友好。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104503.html

相關(guān)文章

  • 可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之組合和復(fù)用

    摘要：幸運(yùn)的是，組合易于理解。組件的組合是自然而然的。高效用戶界面可組合的層次結(jié)構(gòu)，因此，組件的組合是一種構(gòu)建用戶界面的有效的方式。這個(gè)原則建議避免重復(fù)。只有一個(gè)組件符合單一責(zé)任原則并且具有合理的封裝時(shí)，它是可復(fù)用的。 翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 原文的篇幅非常長，不過內(nèi)容太過于吸引我，還是忍不住要翻譯出來。此篇文章對編寫可重用和...

    Amos 評論0 收藏0

  • 精益 React 學(xué)習(xí)指南 （Lean React）- 1.1 React 介紹

    摘要：單向數(shù)據(jù)流應(yīng)用的核心設(shè)計(jì)模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個(gè)技術(shù)前，首先得說一句。然而的單向數(shù)據(jù)流的設(shè)計(jì)讓前端定位變得簡單，頁面的和數(shù)據(jù)的對應(yīng)是唯一的我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

    lsxiao 評論0 收藏0

  • 少婦白潔系列之React StateUp模式

    摘要：一般這種情況會(huì)在類的構(gòu)造函數(shù)內(nèi)創(chuàng)建一個(gè)屬性，引用或詞法域的，但后面會(huì)看到我們有更好的辦法，避免這種手工代碼。 換句話說，StateUp模式把面向?qū)ο蟮脑O(shè)計(jì)方法應(yīng)用到了狀態(tài)對象的管理上，在遵循React的組件化機(jī)制和基于props實(shí)現(xiàn)組件通訊方式的前提之下做到了這一點(diǎn)。 ---- 少婦白潔 閱讀本文之前，請確定你讀過React的官方文檔中關(guān)于Lifting State Up的論述： ht...

    jaysun 評論0 收藏0

  • React中的函數(shù)子組件(FaCC)和高階組件(HOC)

    摘要：高階函數(shù)我們都用過，就是接受一個(gè)函數(shù)然后返回一個(gè)經(jīng)過封裝的函數(shù)而高階組件就是高階函數(shù)的概念應(yīng)用到高階組件上使用接受一個(gè)組件返回一個(gè)經(jīng)過包裝的新組件。靈活性在組合階段相對更為靈活，他并不規(guī)定被增強(qiáng)組件如何使用它傳遞下去的屬性。 在接觸過React項(xiàng)目后，大多數(shù)人都應(yīng)該已經(jīng)了解過或則用過了HOC(High-Order-Components)和FaCC(Functions as Child ...

    elliott_hu 評論0 收藏0

發(fā)表評論

0條評論

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