如何设计一个好用的组件-以chakra-ui为例

引子
研究chakra-ui
如何设计一个好用的组件
- MVP 版本以及存在的问题
- 重构
总结
Reference

引子

最近公司在搭建部门的统一平台，我负责了统一登录前端的开发，因为要对接很多的系统，所以开发了统一登录的sdk，说是sdk其实就是一个组件库。以此为契机，外加之前开发其他的系统中也用了很多种不同的组件库（饿了没-ui/vant/antd/chakra-ui…），今天写一篇文章说说，什么样的组件设计是比较合理的，以及如何设计一个好用的组件。

研究chakra-ui

比较来说我觉得设计比较有特色的一个组件库，就是 chakra-ui 了，不过国内使用的并不多，我也是在之前技术选型的时候偶然找到的，但是仔细读了她的文档之后我发现这个是一个很有特色的组件库，下面细说：

样式自定义

找到这个 chakra-ui 的时候，就是因为需要在使用 tailwind CSS 的同时使用一个组件库，chakra-ui 的一个特色就是使用了和 tailwind CSS 几乎相同的样式 api , 例如：

import { Box } from "@chakra-ui/react"
// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>
// You can also use custom values
<Box maxW="960px" mx="auto" />
// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

这样只要你记住了 tailwind CSS 的api，那么就可以很快的上手 chakra-ui 。
那么这个是怎么实现的呢？
一开始我以为是组件库使用了tailwind CSS ，但是看了源码发现，chakra 将 styled-components 进行了二次封装，而这种 tailwindLike 的 api 是进行了模拟导致的。
在 /packages/styled-system/config/ 里面写入了不同样式以及缩写，以 background 为例：

export const background: Config = {
  background: t.colors("background"),
  ...
  bg: t.colors("background"),
  ...
}

这样实现的，可以说把dirty的工作封装了起来，展示出来的结果都是好用的。

组件组合

书接上文，组件里面做了很多的映射封装，为了减少代码量，统一进行管理，组件库进行了组件的组合（compose）。从一个基本的组件出发，通过默认一些样式，创造了一些新的组件。
例如 Square Circle 组件，是基于 Box 组件extend而来的。

export const Square = forwardRef<SquareProps, "div">((props, ref) => {
  const { size, centerContent = true, ...rest } = props
  const styles: SystemStyleObject = centerContent
    ? { display: "flex", alignItems: "center", justifyContent: "center" }
    : {}
  return (
    <Box
      ref={ref}
      boxSize={size}
      __css={{
        ...styles,
        flexShrink: 0,
        flexGrow: 0,
      }}
      {...rest}
    />
  )
})
if (__DEV__) {
  Square.displayName = "Square"
}
export const Circle = forwardRef<SquareProps, "div">((props, ref) => {
  const { size, ...rest } = props
  return <Square size={size} ref={ref} borderRadius="9999px" {...rest} />
})
if (__DEV__) {
  Circle.displayName = "Circle"
}

这样写减少了重复的代码并且可以保持更好的可维护性。我们在开发的过程中也可以借鉴这种模式，开发出最抽象的组件，从这个最抽象的父类出发来进行派生。

Theminig

chakra ui 的另外一个特点就是拥有一个高度自定义的主题系统，使用的方式类似于 tailwind CSS 设置，也就是说你可同时将一个theme文件应用到两个库中，使用方法可以看一下chakra文档，那么这个主题是如何实现的呢？
首先 chakra ui 维护了一个default theme ,用于在没有自定义 theme 或者自定义了一部分的theme的时候进行合并，合并的过程（toCSSVar）是使用了 createThemeVars 方法将自己配置的theme转化成css var变量，然后将默认的theme和生成的theme进行合并。最后在 :

export const ThemeProvider = (props: ThemeProviderProps) => {
  const { cssVarsRoot = ":host, :root", theme, children } = props
  const computedTheme = React.useMemo(() => toCSSVar(theme), [theme])
  return (
    <EmotionThemeProvider theme={computedTheme}>
      <Global styles={(theme: any) => ({ [cssVarsRoot]: theme.__cssVars })} />
      {children}
    </EmotionThemeProvider>
  )
}

这里是借用了 emotion 的 ThemeProvider。这么一看其实主题设置还是很简单的。这样可以很方便的设置了一个自定义的主题
除此之外，如果想在二次开发的主题上进行三次开发，可以使用 chakra-ui 提供的api Theme extensions。提供了一个类似于 HOC 的包裹函数，以withDefaultColorScheme为例：

export function withDefaultColorScheme({colorScheme,components}): ThemeExtension {
  return (theme) => {
    let names = Object.keys(theme.components || {})
        // ....
    return mergeThemeOverride(theme, {
      components: Object.fromEntries(
        names.map((componentName) => {
          const withColorScheme = {
            defaultProps: {
              colorScheme,
            },
          }
          return [componentName, withColorScheme]
        }),
      ),
    })
  }
}

将配置的颜色Scheme赋值给了配置的对应的组件。内部实现大同小异，都是调用了 mergeThemeOverride这个方法

export function mergeThemeOverride<BaseTheme extends ChakraTheme = ChakraTheme>(
  ...overrides: ThemeOverride<BaseTheme>[]
): ThemeOverride<BaseTheme> {
  return mergeWith({}, ...overrides, mergeThemeCustomizer)
}

内部使用了 lodash.mergewith的方法实现融合，对于此方法 chakra-ui 写了一个mergeThemeCustomizer 作为 lodash.mergwith 的第三个参数，这里的自定义mergeThemeCustomizer方法使用了递归的方式进行merge。


function mergeThemeCustomizer(
  source: unknown,
  override: unknown,
  key: string,
  object: any,
) {
  if (
    (isFunction(source) || isFunction(override)) &&
    Object.prototype.hasOwnProperty.call(object, key)
  ) {
    return (...args: unknown[]) => {
      const sourceValue = isFunction(source) ? source(...args) : source
      const overrideValue = isFunction(override) ? override(...args) : override
      return mergeWith({}, sourceValue, overrideValue, mergeThemeCustomizer)
    }
  }
  // fallback to default behaviour
  return undefined
}

外部组件与二次封装

从上面可以看到，组件库也不是全部从零开始，也使用了很多第三方的库，例如样式库 emotion， styled-components，工具方法库 lodash，这里没啥特别好说的。
另外chakra-ui官方也推荐将组件库和许多第三方的lib一起使用，例如表单验证库formik，此外，在element-ui中也会直接封装throttle-debounce， async-validator等第三方的库。

提供escape

在使用其他的组件库的时候，很多情况下会出现某些组件的细节和设计要求不一致的情况，对于element-ui和ant design来说，由于使用了sass/less等预处理器，可以使用覆盖的方式来覆写样式。在 chakra ui 中，则提供了一个 sx Props 来直接向组件传入样式。

<Box sx={{ "--my-color": "#53c8c4" }}>
  <Heading color="var(--my-color)" size="lg">
    This uses CSS Custom Properties!
  </Heading>
</Box>

这个方式很强大，还支持嵌套样式，media query等。这里的sx是一个封装自@emotion/styled的方法，在 packages/system/src/system.ts, styled方法里面调用了 toCSSObject ，这里拿取到了输入的样式，而所有的ui 组件都会调用这个 styled方法，sx Props 就这样全局生效了。

export function styled<T extends As, P = {}>(
  component: T,
  options?: StyledOptions,
) {
  const { baseStyle, ...styledOptions } = options ?? {}
    // ...
  const styleObject = toCSSObject({ baseStyle })
  return _styled(
    component as React.ComponentType<any>,
    styledOptions,
  )(styleObject) as ChakraComponent<T, P>
}
export const toCSSObject: GetStyleObject = ({ baseStyle }) => (props) => {
  const { theme, css: cssProp, __css, sx, ...rest } = props
  const styleProps = objectFilter(rest, (_, prop) => isStyleProp(prop))
  const finalBaseStyle = runIfFn(baseStyle, props)
  const finalStyles = Object.assign({}, __css, finalBaseStyle, styleProps, sx)
  const computedCSS = css(finalStyles)(props.theme)
  return cssProp ? [computedCSS, cssProp] : computedCSS
}