犹记得,我还是一个初入职场的新人,出去面试总会被问到会不会组件开发的问题。当时项目开发都使用现成的UI组件,最初用Element UI,后来换成了Antd。无论换哪种组件,都帮助节省了很多开发时间,自己平时组件开发,最多就进行一些简单的标题、弹窗、表格的二次封装。总之就是,组件开发的“道行”尚浅,所以面试的时候底气略微不足。
经过岁月的沉淀,经验的累积,自己再开发一套UI组件也不是什么麻烦事的时候,我觉得是时候可跟大家伙唠唠,到底Antd的技术大神们,是怎么实现我们在官网看到的这些组件的。
讲一个我之前年少无知的往事。最开始使用Element,还挺困惑的。就琢磨着饿了么不是送外卖的嘛,怎么还提供上技术的组件库了?后来才知道,人家的技术团队也非常非常的厉害。
这道面试题的关键在于,是怎么写的。
现今,UI组件库丰富且成熟,所以可能觉得日常开发中,通用组件会写的很少,其实不然。
每个系统,无论是业务特性、交互特性还是UI特性,都可以整理出一部分通用组件,比如标题、页面布局、列表、可编辑表格、模糊搜索框等
Antd有现成的Table组件,但是我们实际开发中,一般列表管理页是带搜索项以及数据展示的,有可能还带搜索重置按钮或者搜索导出按钮。
所以通用组件就有用武之地了,一次封装,千千万万的列表管理页面就都可以用一个组件搞定了。
{!resetAble && (
<Button type='primary' onClick={handleReset}>
重置
</Button>
)}
{exportable && (
<Button type='primary' onClick={handleExport}>
导出
</Button>
)}
<Table dataSource={list} columns={columns}/>;
已知日常开发中的部分功能确实可以做成通用组件,那么怎么界定通用的边界呢?
通用性过高会导致代码过于复杂,通用性过低,开发效率会变低。我一般会观察以下两点:
1.用到这个功能的时候,和业务可能关系不大,UI或者交互操作,在任何业务线下都需要这样设计,比如可编辑表格。
2.使用频率,这个要加一点对未来业务发展的预判。比如搜索项中的省份和城市,需要实现模糊搜索匹配的功能。
未来无论怎么样的业务,只要有省份、城市这两项基本都需要这个功能。
<Select disabled={disabled} allowClear value={value} showArrow={!showSearch} filterOption={false} showSearch={showSearch} placeholder={placeholder} onSearch={showSearch ? onSearch : null} onSelect={onSelect} onClear={onClear} style={{ width }}>
<Select.Option key={item[optionValue]} value={item[optionValue]}>
{item[optionKey]}
</Select.Option>
</Select>;
通用组件,差异的部分,一般在功能设计的时候会通过外部传参区分或者控制。所以开发通用组件,参数设计是重要的一个环节。
如果刚开始不是很擅长设计参数,可以参考Antd的参数设计,Antd的组件丰富且功能强大,所以参数考虑的也很周全。边学边练,效果更佳。
如图为Antd的Input输入框组件「平平无奇」的参数:
电影有精彩片段赏析,Antd的组件很丰富,如果一一列举,详细介绍,可能我要写到下个月,所以我选了几个常见且基础的组件,来看看Antd是怎么设计这些组件的。
官网指路☞Ant Design
学习第三方组件之前,不能盲目看代码,可能会找不到重点或者被大量的逻辑绕晕。我一般学习之前先做三方面准备:
栅格化布局,基于行(row)和列(col)来定义信息区块,可以将区域24等分。通过 row 在水平方向建立一组 column,内容放置于 col 内。
看col文件中这三行代码,和各种style、className变量。不难发现,栅格化布局主要是通过组件参数对样式的控制来实现的。
return (
<div {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
{children}
</div>
);
结合参数说明和代码分析,可以大致总结出栅格布局的设计如下:
1.栅格组件基于 Flex 布局。
2.栅格的占位格数,也是它的宽度,样式实现时使用百分比,比如span的值为6时,24等分之后,它的百分比是25%。
.ant-col-6 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
3.区块间隔格数的值实际上是设置的padding值的2倍,是相邻两个模块的间距之和。所以代码中进行了除以2的处理。
if (gutter && gutter[0] > 0) {
const horizontalGutter = gutter[0] / 2;
mergedStyle.paddingLeft = horizontalGutter;
mergedStyle.paddingRight = horizontalGutter;
}
4.响应式布局,支持六个响应尺寸:xs、sm、md、lg、xl、xxl。参数支持多类型可以是number类型,也可以是Object类型。使用typeof判断参数类型。
if (typeof propSize === 'number') {
sizeProps.span = propSize;
} else if (typeof propSize === 'object') {
sizeProps = propSize || {};
}
布局功能分析告一段落,栅格组件赏析也就收工了。
我们来看看步骤条的功能。
我在看Antd的源码时发现,有些组件底层用的第三方react-component中的组件。当然这个组件库也是属于Antd的。所以想研究Steps组件的功能,需要翻另一个组件库的代码react-componentr/steps。
import RcSteps from 'rc-steps';
既可以通过status直接指定当前步骤状态,也可以通过对比current和步骤的数值确定步骤的状态。
const stepNumber = initial + index;
if (status === 'error' && index === current - 1) {
childProps.className = `${prefixCls}-next-error`;
}
if (!child.props.status) {
if (stepNumber === current) {
childProps.status = status;
} else if (stepNumber < current) {
childProps.status = 'finish';
} else {
childProps.status = 'wait';
}
}
步骤条支持多种不同的展示类型,代码实现上主要是通过条件语句判断。
条件判断
内部定义的成功和失败的图标
const icons = {
finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
error: <CloseOutlined className={`${prefixCls}-error-icon`} />,
};
Antd的Table表格,功能很强大,单看文档中的使用介绍就能感觉出来,可用功能大概30多种。我带着这些功能是怎样实现的好奇心,研究了Antd的源码。内容有点多,我挑基础的部分讲一讲。
Table组件,底层主要使用react-component中的table组件。
{flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
const { render, dataIndex, className: columnClassName } = column;
return (
<Cell
className={columnClassName}
ellipsis={column.ellipsis}
align={column.align}
component={cellComponent}
prefixCls={prefixCls}
key={key}
record={record}
index={index}
renderIndex={renderIndex}
dataIndex={dataIndex}
render={render}
shouldCellUpdate={column.shouldCellUpdate}
expanded={appendCellNode && expanded}
{...fixedInfo}
appendNode={appendCellNode}
additionalProps={additionalCellProps}
/>
);
})}
其中单元格的标签会根据传入的component的值不同,使用不同的标签,默认为td,表头thead传入的为tr。
component: Component = 'td',
......
return (
<Component {...componentProps}>
{appendNode}
{mergedChildNode}
</Component>
);
Table组件比较复杂,功能比较丰富,组件的颗粒度也很细,我研究columns和dataSource就花了不少时间,更多的功能,后面再慢慢探索吧。
多看一些优秀的项目源码,可以帮助拓展开发思路,提升技术设计思维。
现在有Antd等优秀的UI组件库,好像是不用重复造轮子了。但是奔着学习的目的,去开发一套UI组件还是可以帮助提升技术的。当然这些都是给初级开发者的建议,大佬们,大佬们的技术能力,我还在努力追赶。
轻松一笑
来自朋友的故事的衍生篇
聚餐,来两盘土豆丝,为什么是土豆丝,因为便宜;为什么两盘,因为一盘不够。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。