构建 B 端组件库的一些思考

组件的分类以及 B 端组件库的定位

• Atoms 原子
• 最细粒度的组件，Button，Input 等。

• Molecules 分子
• 由一组原子组成。例如，标签、Input 和按钮构成一个表单元素。它们是 Design System 的基础。

• Organisms 器官
• 也就是系统中的区块，由各个分子组成的更为复杂的组件。

• Templates 模板
• 它们是由一组「Organisms」组合而成的最终结构，它约定了页面中的实际布局。

• Pages 页面

• 基础组件
• 可以是 Atoms、Molecules、Organisms，它涵盖了 Design System 中的样式以及约定的交互范式， 不关心业务逻辑与相应的接口数据格式。

• 业务组件
• 由基础组件组装而成，涵盖具体的业务逻辑（与接口请求）。

组件的设计原则

定义 PropTypes

import React from 'react';
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

组件的样式可以从外部自定义

const Avatar = ({ className, style, ...props }) => (
  <img
    className={`avatar ${className}`}
    style={{ borderRadius: "50%", ...style }}
    {...props}
  />
);

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string,
  style: PropTypes.object
};

props api 应尽量与 Fusion 或 HTML arrtibutes 保持统一

• Number 的 props api 应与<input type='number' />类似：

<input
type="number"
name="number-picker"
    min="10"
    max="100"
    step="10
>

<NumberPicker
 step={3}
 min={6}
 max={30}
 defaultValue={6}
     onChange={onChange}
/>

• 基于 Fusion 封装的对话框，在与 Fusion api 保持一致的前提下增加新的功能：

// Fusion Dialog
<Dialog
title="Title"
visible={this.state.visible}
onOk={this.onClose}
onCancel={this.onClose}
onClose={this.onClose}>
This is a dialog
</Dialog>

// 自定义 Dialog
<PollingDialog
status={this.state.pollingStatus} // 对话框的状态
titile={this.state.pollingMessage}
visible={this.state.visible}
onOk={this.onClose}
onCancel={this.onClose}
onClose={this.onClose}
/>

降低组件内置逻辑复杂度

1. 新建不同类型的组件
若需要在原有组件的基础上新增一个 feature，在原有组件的基础上新建一个组件往往比新增一个 prop 更好。这样能最保证基础组件的可维护性。

const Button = props => {
  return <button>{props.text}</button>
}

const SubmitButton = () => {
  return <Button text="Submit" />
}

const LoginButton = () => {
  return <Button text="Login" />
}

2. 使用组合
props.children 可以将其他组件注入到本组件中，实现组件的组合。这样做能够减少 props 的数量，并让组件变得更加「透明」。

//Bad
<Sidebar
	title="title"
	link="link"
/>

// Good
<Sidebar>
	<Title>title</Title>
	<Link>link</Link>
</Sidebar

UI 区块之外, 它还涵盖了什么

抽象出来的通用交互逻辑

View = f(State)

‌<TableQuery promiseFn={this.getDataSource}>
{(search, update, error, tableProps) => (
  <React.Fragment>
    <Filter style={{ marginBottom: '20px' }} onSearch={search}>
      <FormItem
        label="Gender"
        required
      >
        <Select style={{ width: '100%' }} name="gender">
          <Option value="male">male</Option>
          <Option value="female">female</Option>
        </Select>
      </FormItem>
    </Filter>
    <Table
      primaryKey="email"
      columns={this.columns}
      update={update}
      {...tableProps}
    />
  </React.Fragment>
)}
</TableQuery>

原创的 Atoms 或 Molecules 组件

题外话：业务强相关的逻辑与交互怎么定位

参考资料

• Atomic Design by Brad Frost

• Kent C Dodds - Simply React