此文前端框架使用 rax，全篇代码暂未开源（待开源）
原文链接地址：Nealyang/PersonalBlog
貌似在面试中，你如果设计一个 react/vue 组件，貌似已经是司空见惯的问题了。本文不是理论片，更多的是自己的一步步思考和实践。文中会有很多笔者的思考过程，欢迎评论区多多交流和讨论。
从需求讨论、技术方案探讨到编码、到最终的测试，经历过了很多次的脑暴，也遇到过非常多的坑，其中有可能跟业务有关、也有可能跟框架有关，基于这些坑，又讨论了很多解决方案和非常 hack（歪门邪道）的对策。但是随着时间的推移，再回头看看当时的 hack 代码，很多都不太记得为什么这么写了，所以这里简单记录下，Filter 组件的开发过程。以便后面查询，更希望能大家一起探讨，以求得更优质的代码架构和实现思路。
由于代码编写使用基于底层 weex 的 rax 框架，所以有些坑，或许对于正在使用 react 或者 vue 的你并不会遇到，可以直接忽略
说说业务Filter，已经常见的不可再常见的组件了，顾名思义，就是个筛选过滤器。我们先看看现有 app 上的一些 filter 展现 形式。既然做组件，我们就需要它足够的通用，足够的易于扩展。
阿里拍卖的 Filter
飞猪的 Filter
在说 Filter 的业务特征之前，我们先约束下每一部分的命名，以便于你更好的阅读此文：
上面分别是拍卖和飞猪的 filter 页面，从这两个页面中，我们大概可以总结出关于 Filter 的一下几点业务画像：
随着页面滚动，Filter 可能具有吸附能力，但是可能距离顶部存在一定的距离
Panel 面板多样性（点击navItem 展开的面板）
Panel 面板以及 navItem 都可能会有动画
navBar 内容可变
panel 面板展示形式不定
panel 面板内容可能非常复杂，需要考虑性能优化
navBar 上可能存在非 Filter 的内容（关注按钮）
有的navBar 的 navItem 没有对应的 panel 面板
Filter 上存在影响搜索结果但是没有影响的”快排“按钮
filter 配置参数能够指定
通过 url 传入相关筛选 id 能够初始化面板选中
...
最终组件产出由于 rax 1.0 ts+hooks 开源版本还在开发中，所以仓库链接暂时就不放上了
rax-pui-filter-utils ： Filter 的内部工具库，仅供 Filter 开发者提供的工具库
rax-pui-filter-tools：配合使用 Filter 的一些工具集，比如 提高性能的 HOC 组件、占位符组件等（可用可不用，根据自己业务需求来），思考原由：并不是每一个 Filter 的使用者都需要这些功能，做成可插拔式，为了降低没必要的 bundle 大小
pui-filter：Filter 核心功能开发库
效果图：
console 处可见抛出的查询参数
设计与思考 前端组件架构图（初版）筛选头 UI 可动态配置扩展，支持点击动画，提供三种筛选项类型
RelatePanel：筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
QuickSearch：筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
PureUI：纯 UI占位类型，即纯 UI 放置，不涉及搜索，比如订阅按钮场景
筛选面板显示隐藏统一管理，支持下拉和左滑展示隐藏动画，统一搜索回调函数
Filter 组件在和业务面板隔离，支持任意组件接入，业务组件里搜索变更通过 onChange(params)回调函数来触发
提供了三种业务通用的面板组件
rax-pui-list-select，列表选择业务面板
rax-pui-location-select，省市区级联选择业务面板
rax-pui-multi-selection-panel，多选业务面板，查看组件使用文档