前言
面试遇到一道题，使用 React 实现移动端物流单据列表查询功能。
好家伙，React 咱已经一年多没碰过了（主要是项目都是用的 vue ，只能额外找时间学习 React ）。
既然挑战来了，刚好也可以复习一下 React ，所以咱花了一天时间将它封装成了复用组件，当其他页面也用到差不多的列表时，直接搬来用。
这里使用到了 Antd-mobile 组件库（毕竟人生苦短，该偷懒还是得偷懒的）废话不多说，先来看效果：
可以看到，只要数据够多，列表可以无限下拉加载，可以通过搜索，模糊匹配对应的数据，也可结合日期区间检索。
gitee地址：https://gitee.com/react-project_2/logistics-bill-list
封装思路
这里不教怎么实现，只讲思路，如果对代码感兴趣的话，可以到我的 gitee 上拉取查看。
1、将可能会复用的块提取出来，单独封装
我们先来看下设计图：
我们可以看到设计图中，除了整个大框架可能被复用之外，圈起来的部分，其实也是有可能会被复用的，那为了防止在其他地方也用到时，再重新写一遍，封装起来就很有必要了，我们将这两块提取出来进行单独的封装，所以一共就需要封装三个组件，目录结构如下:
orderForm是整体框架，stateSelection是状态选择组件，timeSection是选择日期区间组件。
2、使用插槽，让页面布局更灵活
每个表单页上除了字眼不同外，所需要的控件，可能也会不同，但是整体的布局不变，所以我们可以将上面这三块区域均设置为插槽，在需要使用的页面中，灵活组合。
注意：在该项目里，我只设置了蓝色部分的插槽，也就是表单部分，其他部分可以自行添加，我们来看下核心代码：
（orderForm组件）
那么有了插槽以后，我们怎么使用呢？我们可以看 views/home 页面的使用样例：
可以看到注释部分，只要在标签上加入 slot 属性，名称与具名插槽名称一致，那该标签下的内容就会出现在该具名插槽中。
值得注意的是：使用默认插槽时，内容需要用 <></> 或其他标签包裹起来，不然只会显示第一个没有 slot 属性标签内的内容。
最后
实例很简单，但是涉及到的点点面面还是很多的，如果对 React 不熟悉又想了解的话，不妨下载下来看一下，看会了相信你对 Racte 也有自己的见解了
