React組件設計模式-組合組件

這種模式本質上解決的是組件之間傳值的問題。可是它對於傳值以及一些內部操控的邏輯封裝得更嚴密。

場景：但願減小上下級組件之間props的傳遞，簡單來講就是不用傳作顯式地傳值，來達到組件之間相互通訊的目的

舉例來講，某些界面中應該有Tabs這樣的組件，由Tab和TabItem組成，點擊每一個TabItem，該TabItem會高亮，
那麼Tab和TabItem天然要進行溝通。很天然的寫法是像下面這樣

<TabItem active={true} onClick={this.onClick}>One</TabItem>
<TabItem active={false} onClick={this.onClick}>Two</TabItem>
<TabItem active={false} onClick={this.onClick}>Three</TabItem>

這樣的缺點很明顯：

• 每次使用 TabItem 都要傳遞一堆 props
• 每增長一個新的 TabItem，都要增長對應的 props
• 若是要增長 TabItem，就要去修改 Tabs 的 JSX 代碼

可是，組件之間的交互咱們又不但願經過props或者context來實現。但願用法以下面同樣簡潔。

<Tabs>
      <TabItem>第一</TabItem>
      <TabItem>第二</TabItem>
      <TabItem>第三</TabItem>
    </Tabs>

組件之間經過隱祕的方式進行通訊，但這裏的隱祕其實是對props的操做在一個地方進行管理。

---

實現

明白了要實現的交互，和代碼層面要實現的效果，就能夠開始動手了。

TabItem組件有兩個關鍵的props: active（代表當前是否應高亮），onTabClick（本身被點擊時調用的回調函數），
TabItem因爲是每一個Tab頁面的容器，它只負責把props.children渲染出來，因此用函數式組件便可。

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

咱們再來回顧一下想到達到的效果：

<Tabs>
      <TabItem>第一</TabItem>
      <TabItem>第二</TabItem>
      <TabItem>第三</TabItem>
    </Tabs>

使用組件時要避免傳遞props的缺點，那麼在哪裏傳遞呢？天然是是Tabs組件。但上面並無傳入props啊。
Tabs 雖然能夠訪問到props裏邊的children，可是到手的children已是現成的若是直接改它的話，會出問題。
不能夠直接改children的話，咱們就把children複製一份，而後改這個複製過來的children，再渲染出去，就ok啦！

下面來看Tabs的實現：

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) {
          // 複製並修改children
        return React.cloneElement(child, {
          active: activeIndex === index,
          onTabClick: () => this.setState({activeIndex: index})
        })
      } else {
        return child
      }
    })
    return <div className="tabs">
      {newChildren}
    </div>
  }
}

這裏須要用到React不經常使用的api：

• React.Children.map
• React.cloneElement

使用React.Children.map來對props.children進行遍歷。

而React.cloneElement能夠複製某個元素，第一個參數是被複制的元素，第二個參數咱們能夠把想傳入的props加進去，也就是這個時機，
咱們將active和onTabClick傳入。實現最終效果。

總結

這種模式比較好的把複雜邏輯徹底封裝起來了，抽象程度更好，比較適合開發組件開發者。針對props的擴展性也比較好，對於使用組件的開發者來講，也比較友好。