本文以ReactNative中的FlatList作为基础，对其进行二次封装。

1、为什么要进行二次封装？
    首先，我们思考一下，如果不封装直接使用官方提供的FlatList组件会是什么效果。
第一：需要在当前页面处理加载数据时的loading
第二：数据为空时的界面显示。
第三：页面出错，提示重新加载的界面
。。。
如果此时你的项目中已经写了100个列表页了，产品经理想换一下loading的颜色，你怎么办？即使是CV技术如此成熟的情况下，也得去操作100次才行。所以为什么要对其进行二次封装，不言而喻了吧？

2、从何而起？
    要封装一个组件，首先要想清楚他有哪些行为，然后以行为为核心，对其进行延伸。

一、行为层
    1、下拉刷新
    2、下拉加载更多(特殊的业务场景会用到)
    2、上拉加载更多

简单说下行为层需要做些什么：
1、下拉刷新：需要重新获取最原始的列表数据
2、下拉加载更多：与上拉加载更多大同小异，需视业务而定
3、上拉加载更多：如果是分页的列表，需获取下一页的数据

注意 ： 列表组件并非一定是分页列表，后面我会举出非分页列表的具体业务场景的例子，供大家参考

下面我们来说说视图层：

二、视图层
    1、正常数据列表页面
    2、数据为空页面（可延伸为不同业务显示不同的提示）
    3、加载失败、重新加载提示页面
    4、首次加载loading页面（可与下拉刷新loading为同一页面，参考B站）

与视图层紧密相连的就是数据层,它要做的就是处理组件外层传进来的数据，请看下面代码:

index.jsx

   <List
          getData={async () => {
            const {data, total} = await Api.getListData();
            
            return {data, total}
          }}
        />

List.jsx

  const getData = async () => {
    const {data, total} = props.getData();
  }

通过以上方式，我们可以在二次封装的List组件中获取到数据，通过获取到的数据进行组件内部的操纵。具体实现我就不一一赘述了，一万个人心中有一万个哈姆雷特，一万个程序员中也有一万种代码。

下面简单画了下组件内部getData方法的流程图：