簡述Slot

slot插槽是Vue對組件嵌套這種擴展機制的稱謂，在react可以也這樣稱呼，但是并不很常見。不過叫slot確實很形象。

這樣的形式就是slot插槽：

vue

<template>
  <container-comp>
    <content></content>
    <footer></footer>
  </container-comp>
</template>

react

() => (
  <ContainerComp>
    <Content />
    <Footer />
  </ContainerComp>
)

（我們可以把container-comp稱之為容器組件，把content、footer稱之為子組件）

這種機制的好處主要在于，在某個容器提供的模版或者數(shù)據中，可以根據需求靈活擴展需要渲染的子組件。專業(yè)點說就是通過容器和子組件之間的協(xié)議（數(shù)據交換和渲染方式），將彼此邏輯獨立解藕，提升了各自的復用性。

舉個例子，容器組件提供了一份渲染模版，將各個模塊的位置預留出來，使用的時候根據各個子組件的順序或者插槽名稱，在不同場景可以選擇不同的子組件。

再舉個使用插槽的例子，容器組件中提供一些數(shù)據，比如定時請求某種接口得到數(shù)據，或者監(jiān)聽，訂閱一些數(shù)據，比如在掛載完成后監(jiān)聽鼠標事件，得到位置數(shù)據。數(shù)據拿到之后，具體的對數(shù)據的渲染方式交給子組件來做，而這時候，容器可以通過參數(shù)傳遞的方式將得到的數(shù)據交給子組件。

通過上面簡單的的例子描述，可以看到，使用插槽的的代碼設計符合單一職責原則，邏輯更加內聚。

而不管是vue還是react上述描述的這些功能都是支持的，只是有的叫法略有所別，但是其目的一致。（因為近期在項目中使用vue多一點，而之前對vue的了解只是籠統(tǒng)的學習過響應式原理，并沒有真正在項目里寫過vue，所以，近期希望結合vue和react，來系統(tǒng)的回顧回顧相關的知識點。）

下面就先看下vue中的插槽都有什么功能。一邊看vue，一邊對比react。 參考這里：vue2官網：slot，可以看到，插槽相關的核心功能有：

• 基本渲染插槽內容；
• 具名插槽：一個容器多個插槽，需要分別命名；
• 插槽傳遞參數(shù)，屬于相對高級點的用法；

基本插槽

vue基本插槽

最簡單插槽用法就像下面這樣：

<template>
  <main-comp>
    <div>內容</div>
    <!--  
    可以是任何自定義組件
    <my-sub></my-sub>
    -->
  </main-comp>
</template>

main-comp就是容器組件，而我們將<div>內容</div>作為容器的子元素，那么，容器里面怎么寫呢？

<template>
  <div class="main">
    <slot>后備信息，以防萬一</slot>
  </div>
</template>

可以看到，在容器里面簡單的使用slot標簽，相當于占位。當組件渲染的時候，<slot></slot> 將會被替換為<div>內容</div>，如果沒有使用時插槽的話，會渲染出slot標簽內的內容：“后備信息，以防萬一”。當然，使用的插槽不止是<div>內容<div>這么簡單，可以是任何自定義組件。

ok，對應react中實現(xiàn)對應的代碼怎么寫呢？

react基本插槽

使用插槽組件：

() => (
  <MainComp>
    <div>內容</div>
    {/* <MySub />  可以是任何自定義組件 */}
  </MainComp>
)

容器中定義插槽：

const MainComp = (props) => {
  return (
    <div class="main">
      {props.children ?? '后備信息，以防萬一'}
    </div>
  )
}

react中，組件的子組件都存在props.children中，所以直接在jsx中渲染對應的位置渲染props.children變量就可以了，而后備內容可以應用任何js語法，來判斷props.children收否存在，從而顯示后備內容與否。

具名插槽

vue具名插槽

上面是最簡單的場景，但有時候，一個容器需要渲染很多插槽，比如需要渲染一個內容區(qū)域content和一個底部區(qū)域footer，這時候就需要對插槽命名了，稱之為具名插槽： 下面main-comp組件要使用兩個插槽，分別命名為content和footer：

<template>
  <main-comp>
    <template v-slot:content>
      <sub-comp1></sub-comp1>
    </template>
    <template  v-slot:footer>
      <footer-comp></footer-comp>
    </template>
  </main-comp>
</template>

定義插槽：

<template>
  <div>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

slot用name屬性標注了其名字“xxx”，對應使用的時候要用v-slot:xxx，這樣“xxx”的template就會對應替換成name是xxx的slot的位置。有一點需要注意，v-slot這個指令對template生效，也就是說，要使用具名插槽，必須要用template將內容包裹起來。

另外，如果slot顯示指定name，其實它對應也是有name的，它默認的name叫default。

react具名插槽的討論

具名插槽，對應react的話，我用了這些年react，還真沒聽過“具名插槽”這個稱謂。不過盡管沒有100%一致的對應vue的具名插槽，但類似的功能有幾種實現(xiàn)方式：

模仿具名插槽

a. 用次序約定：

我們知道react的“插槽”寫法（嵌套子組件），子組件都是作為props.children數(shù)組的子元素，那么其實最簡單的一種方式就是，children的次序對應著某個子插槽。比如：
使用時：

() => {
  return (
    <MainComp>
      <SubComp1 />
      <FooterComp />
    </MainComp>
  )
}

那么，props.children[0]對應的就是SubComp1，而props.children[1]對應的就是FooterComp，所以在MainComp內部就可以這樣：

const MainComp = (props) => {
  const content = props.children[0]
  const footer = props.children[1]
  
  return (
  <div>
    { content }
    { footer }
  </div>
  )
}

但是上述寫法的問題在于：具名呢？說好的名稱呢？使用的時候順序亂了咋辦？

b. 傳遞對象：

想要實現(xiàn)具名，可以下面這樣寫法，本質還是props.children，我們把對象作為“插槽”內容，對象的key就是插槽名稱，value就是子組件：

() => {
  return (
    <MainComp>
      {
        {
          content:(<SubComp1 />),
          footer:(<FooterComp />)
        }
      }
    </MainComp>
  )
}

對應的MainComp：

const MainComp = (props) => {
  const { content, footer  } = props.children
  return (
  <div>
    { content }
    { footer }
  </div>
  )
}

這里這個props.children可以直接解構對象的屬性。（有一點要注意的是：props.children不一定是數(shù)組，當只有一個元素的時候就不是數(shù)組）。

c. 判斷組件的自定義靜態(tài)，實現(xiàn)具名

上述這種寫法看上去和vue的功能一致了，但是坦白講，這樣的代碼在react世界里面實屬罕見。不是說寫法錯誤，但是似乎不那么符合使用習慣。

react中類似具名的插槽其實還可以通過給子組件顯示命名方式實現(xiàn)，其實就是給子組件掛了個靜態(tài)變量：

const Content = () => (<div>I am Content</div>)
const Footer = (props) => (<div>Footer Here {props.info}</div>)

// 兩個子組件標記出來
Content.compName =  'content'
Footer.compName =  'footer'

這樣在容器組件中就能通過這兩個標記，識別出對應的組件：

export function MainComp(props) {

  const isMany = React.Children.count(props.children) > 0
  let footer = (<div>footer</div>)
  let content = (<div>content</div>)

  if (isMany) { 
    React.Children.forEach(props.children, item => {
      const { compName } = item.type
      // 判斷子組件類型
      if (compName === 'footer') footer = item
      if (compName === 'content') content = item
    })
  }

  return (
    <div>
      title text<br/> 
      { content }
      { footer }
    </div>
  )
}

這里面用了幾個React.Children的方法來判斷props.children，核心邏輯是當children是數(shù)組時，遍歷每一個子項，判斷其“name”（這里我們的約定為compName），再根據name設置對應需要渲染的子組件的變量。

isMany部分也可以這樣寫：

  try {
    React.Children.only(children)
  } catch (e) {
    React.Children.forEach(children, item => {
      const { compName } = item.type
      if (compName === 'footer') footer = item
      if (compName === 'content') content = item
    })
  }

這樣我們在使用“插槽”組件的時候就不用擔心子組件次序問題了：

() => {
  return (
    <MainComp>
      <Footer /> {/* 先寫footer還是能正確的渲染出來 */}
      <Content />
    </MainComp>
  )
}

上面a、b、c三種方法實現(xiàn)了和vue一樣的具名的slot，第一種只是簡單的次序對應，第二種能實現(xiàn)，但是不太符合react習慣，第三種能實現(xiàn)，也是react的寫法。

不過，一般簡單的需求，沒必要用第三種，可以直接使用屬性傳遞組件，我也不知道應該怎么叫，就叫屬性插槽吧。

屬性插槽

一個更符合react習慣，近似實現(xiàn)vue具名slot的方法是，直接傳props，但props的類型是組件：

() => {
  return (
    <MainComp
      content={(<SubComp1 />)}
      footer={(<FooterComp />)}  
    /> 
  )
}

這樣在MainComp的內部直接通過props去拿對應的組件并渲染在適當?shù)奈恢镁托校?/strong>

const MainComp = (props) => {
  const { content, footer } = props
  return (
  <div>
    { content }
    { footer }
  </div>
  )
}

<template>
  <div class="main">
    <slot 
      :styleProps="shareStyle" 
      :data="shareStyle" 
      :description="desc">
    </slot>
  </div>
</template>

  <!-- slotProps 是通過main傳遞過來的 -->
  <template v-slot:default="slotProps">
    <!-- 默認插槽可以簡寫成 v-slot -->
    <div :style="slotProps.styleProps">{{ slotProps.description}}</div>
  </template>

slotProps = {
  styleProps, data, description
}

<template v-slot:rightItem="slotProps">
  <staff :staff="slotProps.data"></staff>
</template>

() => {
  return ( 
    <MainComp>
      {
        (data) => (<Staff staff={data} />)
      } 
    </MainComp>
  )
}

const MainComp = (props) => {

  const [data, setData] = useState({})
  useEffect(() => {
    const info = await getData()
    setData(info)
  }, []) 
  return (
    <div>
      {
        props.children && props.children(data)
      }
    </div>
  )
}

() => {
  return (
    <MainComp
      staff={(data) => (<Staff staff={data} />)}
    />
  )
}

const MainComp = (props) => {
  const [data, setData] = useState({})
  useEffect(() => {
    const info = await getData()
    setData(info)
  }, []) 
  return (
    <div>
      {/* 這里變一下 */}
      {
        props.staff && props.staff(data)
      }
    </div>
  )
}