组件的设计与封装

Posted by Wh0ami-hy on September 4, 2024

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. 通用特性 / 定制特性

通用特性归于基础组件中,定制特性在业务组件中封装

看一个复杂些的例子,各大厂都在推的工作流类应用,我们来思考如果是我们来做这些节点,我们应该如何来做?我们可以从以下几点来思考:

  1. 节点的通用特性是什么?

  2. 节点的定制特性是什么?

  3. 如何封装?

4. 状态定义

React 官方的这篇文章值得反复阅读

5. 状态的存储

状态的存储方式是一个跟实际业务挂钩的东西

唯一要注意的就是区分好「 全局状态 」和 「 组件状态 」

应该始终以一个消费者的视角来开发组件。

综上所述,组件的设计应该包含以下的路径:

  1. 根据「 通用特性/定制特性 」确定组件的通用级别。

  2. 将特性区分为 「 UI 特性 / 业务特性 」来确定组件层级和封装。

  3. 结合一些技巧来优化组件层级和状态存储的位置,优化性能表现。

  4. 还有许多的细节需要处理(Typescript 定义、props 定义、样式等)…


本站总访问量