Skip to content

如何思考做组件

在面试时,面试官常会问你一个问题,你是如何设计组件的?假设让你做过一个 Modal 组件,你会怎么做?假设让你做一个非常复杂的组件,你会如何思考?这里谈谈我的看法

通常来说,要做一个组件,我们的思考思路是这样,

一个常见的组件通用,我们将共同的地方提取,提取多了,自然而然有了更细微了基础组件,即类似 Button、Icon、Layout 等,同理,Input 组件也在其中

通常意义上,使用一个组件时,会在属性中加参数来表示使用了此功能,例如

tsx
<Input
    model="value"
    center
    label="短信验证码"
    clearable
    placeholder="请输入短信验证码"
/>

截图

这个组件起码包含 XX 组件,

我会把组件分为基础组件,

两层思考,一个是组件及可用,即 Button、Icon 等,你拿来可以直接用

但是功能点与业务捆绑比较重的组件,我会将其拆分为模块子组件,演示一下

一般使用方法:

tsx
<Input label="文本" />

业务方面的使用方法:

tsx
<Input.captcha label="短信验证码">

这个组件表示短信验证码组件

思考如何做组件

最简单的方法肯定是抄

看别人写的好的,自己模仿着做

又很多东西是到了做的时候才面临