封装库实现原理总结（wip）
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item
组件库
- 基础组件：从0实现的组件。
- 富文本编辑器
- 公式编辑器
- 悬浮输入框：自适应宽高。
- 级联面板
- resizeable panel ：可调整面板的组件，能够通过分隔线调整它们的大小
- 功能组件： 基于公司组件库基础上封装的组件
- tableRender，表格渲染组件：
- 集合翻页，筛选，搜索，选择行（多选、单选、框选），列伸缩（react-resizable），如果修改就会触发对应的事件。
- 封装多种类型数据展示提供，列传入type即会渲染成对应组件，例如图片、链接、金额、时间、时间区间等数据格式
- formRender，表单渲染组件（参考：https://xrender.fun/form-render/advanced-layout）：
- 数据驱动，通过接收传入的 props 属性，动态渲染表单组件。
- 表单校验：rules字段来配置组件校验规则。
- 表单联动：在每个控件配置上有一个relation字段和onRelationChange事件，当relation变化，onRelationChange就会执行。
- 自定义组件：通过配置render来实现自定义渲染组件。
参考：
- 业务组件：封装数据，自动请求业务数据。例如解决数据结构经常修改，可能导致数据不兼容，使用方经常要做对应修改的问题。这样的话，他们只需要更新组件库版本就行。
- 例如：用于显示商品库、公式库数据、属性库的的数据表格，内置搜索、分页、切换视图模式、编辑功能。只用提供功能开关、和样式class就行，方便使用方，功能开关，样式调整。
FormulaEditor 公式编辑器
通过传入规则，配置类型颜色，解析回调，实现文本高亮、联想功能。
AutoInput 自适应输入框
实现功能
- 输入框的宽高自适应
组件结构
- 外层容器div元素,设置为相对定位和内联块显示
- 通过visibility: hidden隐藏文字span元素,设置文字样式继承
- 文本输入textarea元素,设置为绝对定位,填充整个容器,设置字体和尺寸继承
原理
- span元素和textarea的文本内容同步
- textarea输入时,同步更新span文本
- span文本更新会自动调整其宽度
- 作为绝对定位父元素的div也会被拉伸扩展,从而使textarea自适应扩大
Cascader 级联面板
实现的理由
- 开源的ui库都是级联面板选择器，无法直接显示级联面板。
- 支持在每列上下增加自定义内容。
SelectItems 可选项
这是一个受控组件，这是一个纯逻辑组件，没有样式。
- 支持键盘上下切换。
- 切换时会自动滚动到选中项，使其保持可视范围。
react hook库
useRequest
特性：
- 防抖、节流
- 轮询
- 解决并发数据问题
- 取消请求
- 使用唯一id，每次新请求是id+1，返回时对比当前最新的id是否和请求时id一样，不一样则忽略。
useAxios
特性：
基于axios封装，使用useRequest，支持cancel取消当前请求
useFn
特性：
代替useCallback，缓存方法，不用再写依赖项。
原理：
通过useRef，存储方法，再通过一个useRef，写一个方法调用useRef保存的方法，保证第二个useRef的方法不变
useMutationObserver
封装mutationObserver数据的变化，
衍生hook：
- useTitle：修改标题
- useElementIsScroll：判断元素是否处于滚动状态，通过scrollWidth与clientWidth
- 监听dom尺寸变化的useSize
- 监听元素滚动位置的useScroll。
useEventListener
封装事件注册，会在组件卸载时自动删除事件监听，还支持监听手动关闭、启用。
特性：
- 返回停止、开启方法。
- 组件卸载时，自动清除监听器。
useEffect
把useEffect 拆分为3个hook，分别在组件mount、数据update、组件unmount时执行。
衍生hook：
useMount：加载时执行
useUpdate：依赖项更新后执行
useUnmount：组件卸载时执行
useVirtualScroll
提供虚拟滚动的列表，解决大数据渲染卡顿问题。支持固定高度和动态高度。
虚拟滚动
- 虚拟列表项高度不固定；
如果接收一个
min-height参数由用户传进来一个最小高度的值，把这个最小高度当作元素的固定高度去使用如上面（ITEM_HEIGHT），- 页面是自适应，导致列表项高度会产生变动；
- 列表存在滚动加载的场景；
实现特性：
- 支持高度固定和不固定的列表项。
- 监听窗口变化，列表项高度，变动后会重新计算。
- 支持缓存区，上下可以配置多显示几行数据。
- 支持行列同时虚拟滚动。
useRequest
作为一个请求中间层，接收任意
Promise 对象，封装API请求的hook，参数是promise和配置，通过配置可以支持防抖、节流、轮询。并解决竞态问题，可以支持缓存，依赖更新。