項目開發(fā)完成后除了改bug外,還要考慮一些細節(jié)的優(yōu)化點,考慮哪些行為對用戶是不友好的.在之前開發(fā)完成的那個react項目中找個小例子說明一下.

在之前開發(fā)的項目中有很多列表展示的數(shù)據(jù),但是如果沒數(shù)據(jù)要展示ui給定的設(shè)計,也就是一些圖片文案什么的.鑒于要多地方使用所以將為空的狀態(tài)單獨寫一個組件,圖片地址和文案動態(tài)傳入.

先來說說會出現(xiàn)的情況因為數(shù)據(jù)是異步請求的,剛開始我是通過數(shù)據(jù)的長度是否為0來判斷是否展示空組件,但是數(shù)據(jù)請求需要一定的時間,那么就會出現(xiàn)用戶進入頁面后空組件會一閃而過,這樣對于用戶在視覺上的體驗肯定是不友好的.

因此我采取的方法是定義一個狀態(tài),默認值設(shè)為false,當請求成功時狀態(tài)設(shè)為true.當狀態(tài)為true并且數(shù)據(jù)長度為0時才展示空組件.但是這樣會引來另一個問題,那就是剛開始頁面會出現(xiàn)短暫空白然后展示空組件或者數(shù)據(jù)列表.當然這個可以根據(jù)產(chǎn)品要求可以加一些loading動畫什么的.

let [newList, setCount] = useState({//需要獲取的數(shù)據(jù)
    pageNum: 1,
    pageSize: 10,
    total: 0,
    list: []
  });
let [pageMain, setPagemain] = useState(false);//設(shè)置數(shù)據(jù)是否請求成功的狀態(tài)

  let initTask = pageNum => {
    getTaskNum(0, pageNum, newList.pageSize).then(res => {//數(shù)據(jù)請求方法
      if (res.msg == "success") {
        setCount({ ...res.data, pageNum });
        if (!pageMain) {//如果狀態(tài)是false的話那就設(shè)置為true
          setPagemain(true);
        }
      }
    });
  };

  useEffect(() => {//調(diào)用數(shù)據(jù)請求方法
    initTask(newList.pageNum);
  }, []);

return (
    <Layout>
      <Antspin ishide={pageMain ? "none" : "block"}>//根據(jù)設(shè)置的狀態(tài)判斷l(xiāng)oading是否顯示隱藏
        <Spin size="large" spinning={!pageMain}></Spin>
      </Antspin>

      {pageMain && newList.list.length == 0 ? (//如果狀態(tài)為true并且數(shù)據(jù)長度為0展示空組件
        <MangeVoid voidText="沒有新的分配項目呦率翅，耐心等等吧莺掠。"></MangeVoid>
      ) : (
        newList.list.map((item, index) => (
          <ManageNewTask key={index}> </ManageNewTask>
        ))
      )}
    </Layout>
  );

這樣就可以讓用戶體驗更友好一些.