1. 设计
flowchart LR
5emcmlug3i37dupviovh9067oj["组件设计"] --> 2e3gldb8pr4l8v465kmnd2ku3v["组件层级设计"]
2e3gldb8pr4l8v465kmnd2ku3v --> 3sljttlr3hhoks9je2kv1e9gel["职责的确定"]
3sljttlr3hhoks9je2kv1e9gel --> 3801ved9ggt90361v2b8gu6g0q["基础组件 or 业务组件"]
3sljttlr3hhoks9je2kv1e9gel --> 2flfn88iidjphp3vkkcqcvcmhc["通用 or 定制"]
5emcmlug3i37dupviovh9067oj --> 2uk7vvod7kbgtp8q9gpb2va4t9["状态设计"]
2uk7vvod7kbgtp8q9gpb2va4t9 --> 48066v5mj7js61svgja7knbd7o["定义(数据结构)"]
2uk7vvod7kbgtp8q9gpb2va4t9 --> 7c17eie2culpnqnkf4o44ngcbg["存储(local storage or 全局状态 or 组件状态)"]
2. 基础组件 / 业务组件
如何区分基础组件和业务组件的差别,通用性是我们区分基础组件和业务组件的边界。
3. 通用特性 / 定制特性
通用特性归于基础组件中,定制特性在业务组件中封装
看一个复杂些的例子,各大厂都在推的工作流类应用,我们来思考如果是我们来做这些节点,我们应该如何来做?我们可以从以下几点来思考:
-
节点的通用特性是什么?
-
节点的定制特性是什么?
-
如何封装?
4. 状态定义
5. 状态的存储
状态的存储方式是一个跟实际业务挂钩的东西
唯一要注意的就是区分好「 全局状态 」和 「 组件状态 」
应该始终以一个消费者的视角来开发组件。
综上所述,组件的设计应该包含以下的路径:
-
根据「 通用特性/定制特性 」确定组件的通用级别。
-
将特性区分为 「 UI 特性 / 业务特性 」来确定组件层级和封装。
-
结合一些技巧来优化组件层级和状态存储的位置,优化性能表现。
-
还有许多的细节需要处理(Typescript 定义、props 定义、样式等)…