React：组件复用的技巧笔记

复用是组件化开发体系的立命之本，可以说组件化的初衷就是为了复用性。但是组件化的复用方式也存在一定的问题，其中拆分粒度就是其中一个绕不开的话题，今天咱们就来讲一讲 React 当中的一个不太常用的 API： cloneElement，他如何帮组我们更好得进行组件拆分。

假如我们有一个Layout组件，那么一般来说这个组件主要接收的就是children，把它放在主要内容的部分，然后组件本身的节点来控制布局，那么这个时候如果我们这个布局包含两个部分呢，比如还有一个header部分，是跟主要内容有明显区分的。

比如：

 

那么我们这个时候会如何设计这个组件呢？

版本一

function Layout({ header: Header, children }) {
  return (
    <div className='container'>
      <div className='header'>
        <Header />
      </div>
      <div classNmae='content'>{children}</div>
    </div>
  )
}

这应该是