react列表展示的优化

项目开发完成后除了改bug外,还要考虑一些细节的优化点,考虑哪些行为对用户是不友好的.在之前开发完成的那个react项目中找个小例子说明一下.

在之前开发的项目中有很多列表展示的数据,但是如果没数据要展示ui给定的设计,也就是一些图片文案什么的.鉴于要多地方使用所以将为空的状态单独写一个组件,图片地址和文案动态传入.

先来说说会出现的情况因为数据是异步请求的,刚开始我是通过数据的长度是否为0来判断是否展示空组件,但是数据请求需要一定的时间,那么就会出现用户进入页面后空组件会一闪而过,这样对于用户在视觉上的体验肯定是不友好的.

因此我采取的方法是定义一个状态,默认值设为false,当请求成功时状态设为true.当状态为true并且数据长度为0时才展示空组件.但是这样会引来另一个问题,那就是刚开始页面会出现短暂空白然后展示空组件或者数据列表.当然这个可以根据产品要求可以加一些loading动画什么的.

let [newList, setCount] = useState({//需要获取的数据
    pageNum: 1,
    pageSize: 10,
    total: 0,
    list: []
  });
let [pageMain, setPagemain] = useState(false);//设置数据是否请求成功的状态

  let initTask = pageNum => {
    getTaskNum(0, pageNum, newList.pageSize).then(res => {//数据请求方法
      if (res.msg == "success") {
        setCount({ ...res.data, pageNum });
        if (!pageMain) {//如果状态是false的话那就设置为true
          setPagemain(true);
        }
      }
    });
  };

  useEffect(() => {//调用数据请求方法
    initTask(newList.pageNum);
  }, []);

return (
    <Layout>
      <Antspin ishide={pageMain ? "none" : "block"}>//根据设置的状态判断loading是否显示隐藏
        <Spin size="large" spinning={!pageMain}></Spin>
      </Antspin>

      {pageMain && newList.list.length == 0 ? (//如果状态为true并且数据长度为0展示空组件
        <MangeVoid voidText="没有新的分配项目呦，耐心等等吧。"></MangeVoid>
      ) : (
        newList.list.map((item, index) => (
          <ManageNewTask key={index}> </ManageNewTask>
        ))
      )}
    </Layout>
  );

这样就可以让用户体验更友好一些.