近一年的code review的工作中,需要制作一些高可用的业务场景组件。那我的首要工作当然也是要写高可用的组件库啦。
在这一段的工作里面,我发现一个问题,像我们这些中小企业来讲一般都是基于antd的组件进行开发。当然react也给出了一套自己的组件封装规范。
可重用的组件是什么样的?
我们以antd
的modal
组件为例子。按照antd
的案例代码来演示。我们平时写代码的时候是怎么阅读的呢?大概是如下情况。
<Modal
visible={visible}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" onClick={this.handleCancel}> Return </Button>,
<Button key="submit" type="primary" loading={loading} onClick={this.handleOk}> Submit </Button>,
<Button key="link" href="https://google.com" type="primary" loading={loading} onClick={this.handleOk} > Search on Google </Button>, ]} >
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
我们在进行抽象组件的时候,把很多的行为,使用参数的形式进行了传递,从而进行功能上的多态行为实现。
这么做的问题是什么呢?
有没有发现我们在阅读代码的时候,这种写法有点变扭?我吗需要去看一个title的结构的时候是不知道这个组件是长什么样子的。或者footer的这些样子我们也需要进行文档的api查阅后才知道它是用来做什么!我们只有一个children阅读起来比较可观。
在这里我比较期待