React组件化复用的一些技巧

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

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

比如:

layout

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

版本一

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

这应该是我们比较常见的方式,我们通过把具体组件作为Layoutprops传入进来,然后按照组件的写法把它写入到组件渲染内容之中。

我们想要使用这个组件,一般会像下面这样:

function Header() {
  return <h1>Title Here</h1>
}

;<Layout header={Header}>
  <div>content here</div>
</Layout>

那么这样做有什么问题呢?显然是有的,最明显的就是无法在使用Header的时候指定props

如果Headerprops,那么就我们只能硬编码在Layout里面,不能在使用Header组件的地方进行声明,所以如果我们想要复用一个Header组件,我们可能需要再声明一个组件,比如我们给Header组件一个叫做messageprop用来指定显示的文字内容

function Header({ message = 'Title Here' }) {
  return <h1>{message}</h1>
}

那么如果我们想要在不同页面复用这个组件并且显示不同的标题,我们需要这么做:

function BigHeader() {
  return <Header message='The Other Title' />
}

这么做显然在组件较为复杂而且props较多的情况下,也可以达到一定的复用效果,但是追求极致的我们肯定不希望仅仅局限于此。

第二版

那么有没有办法让我们可以在使用时能指定props呢?答案肯定是有的,我们可以将Layoutheader这个prop接收的不是组件本体,而是具体的ReactElement

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

那么我们在使用的时候就可以非常方便得指定props

<Layout header={<Header message='The Other Title' />}>
  <div>Content Here</div>
</Layout>

要理解我们可以这么做,首先我们需要弄清楚什么是ReactElement。因为我们大部分时候写React组件的时候用的都是JSX,所以很多同学可能并不知道ReactElement的存在。

其实JSX经过babel翻译之后得到的是如下代码:

// jsx
;<div id='id'>content</div>

// js
React.createElement('div', { id: 'id' }, 'content')

这个函数接收三个参数

  • component具体渲染的组件,包括原生 dom 节点(string)和自定义组件(object)
  • config,包括所有props再加上keyref形成的字典对象
  • children,子节点内容,可以是ReactElementArraystring等内容

最后他返回的是一个叫做ReactElement类型的对象,他会包含后续 React 渲染过程中需要用到的一个节点包含的所有信息,我们的props.children其实就是最典型的ReactElement

所以在上诉例子中,我们传入的header就是一个ReactElement,所以可以直接作为其他节点的children而使用。

同时使用这种方式我们还获得来一个非常大的优势,那就是我们甚至可以重新定义一个组件,就可以直接使用Layout

<Layout header={<h1>The Other Title</h1>}>
  <div>Content Here</div>
</Layout>

这样同样也是可以行得通的。

那么是否到这里我们就大功告成来呢?NO,NO,NO,我们还是有值得优化的地方。

第三版

试想一下,如果我们的Layout中接收来header是一个节点,但是呢他希望对传入的组件的一些props有强制的要求呢?比如我们的Header组件如果还有另外一个propcolor,用来指定文字内容的显示颜色:

function Header({ message = 'Title Here', color = 'red' }) {
  return <h1 style={{ color }}>{message}</h1>
}

Layout要求所有传入的Header必须颜色是green,显示我们也可以在使用Header组件的时候自己指定这个prop,但是如果我们需要强制指定的prop很多,而且使用Layout的地方也很多,那么明显我们会写很多重复代码,而且如果后面我们需要修改这个要求的时候也会导致多次修改,甚至有些地方忘了修改而导致 bug。那么这时候我们该怎么做呢?

我们可以使用一个 API,这个 API 并不常用,但是在这种场景下,他却非常有用,这就是React.cloneElement,我们来修改一下Layout

function Layout({ header, children }) {
  return (
    <div className='container'>
      <div className='header'>
        {React.cloneElement(header, { color: 'green' })}
      </div>
      <div classNmae='content'>{children}</div>
    </div>
  )
}

通过这样,我们真正渲染出来的Header他的props.color就永远都是green。那么这个 API 是啥意思呢?

顾名思义,他是用来克隆一个ReactElement,他接收三个参数,第一个是目标element,第二个是props,第三个是children。可见他跟createElement非常像,唯一的区别是第一个参数从组件变成来节点。

他做的事情其实就是拷贝目标element,并把后面两个参数覆盖原elementprops,以此创建一个新的ReactElement


那么到此,我们的优化过程也差不多来,当然 demo 显然是非常简单的代码,现实中的问题往往要复杂很多,比如接收的如果不是一个ReactElement而是数组,字符串该如何处理。那么这些问题在这里就不再继续深入来,留给各位小伙伴自己去思考吧,毕竟万变不离其宗,知道了核心思路之后,其他问题也就可以迎刃而解来。

订阅技术周报