如何在React項目中實現loading

    如果在移動端的話，由於移動端操作相對比較單一，因此loading形式也比較簡單。通常做法是在請求發出時頁面正中位置彈出一個loading的 toast，請求結束隱藏 toast 。 這種做法大家接受度比較高，實現起來也比較簡單，就不贅述了。

    接下來談一下web端，由於pc強大的計算能力和相對大的屏幕，給用戶很大的操作空間，因此出現了很多種loading狀態。 比如頁面級別的loading（github頂部的loading bar），組件級別loading（比如一個按鈕，一個placeholder）。

我們先來分析下需求：

1.我們希望可以控制loading 的時機。

2.我們希望新增一個loading需求，不需要寫很多代碼

3. 我們不希望保存loading這樣的業務無關狀態（狀態最好都別保存）

使用起來大概是這樣子的：

（頁面級別，組件級別通用）

基礎版：

<Loading

    isloading={props.isloading}

>

<HelloWorld>123</HelloWorld>

</Loading>

標準版：

可以根據請求自動loading，需要結合redux-promise等實現。

具體來說就是在請求是dispatch一個action:

{
 type:"xxx",
 payload: "xxxx",
 meta: {
   requestId: 233
 }
}

這樣我們可以針對請求實現對應的loading （isloading 為true， requestId 不生效）

<Loading

    isloading={props.isloading}
    requestIds={[233,666,999]}

>

<HelloWorld>123</HelloWorld>

</Loading>

典藏版：

可以實現諸如 頂部progress bar，菊花轉動，自定義文字以及圖標，顯示百分比等功能（百分比基於requestsIds實現， 效果更逼真，個人覺得比微信的逼真）

<Loading
    mode="overlay" // overlay (default)/ progress
    showPercents={true} // make sense only in progress mode (default is false)
    spining={true}
    icon={<Icon type="loading" />}
    isloading={props.isloading}
    requestIds={[233,666,999]}

>

<HelloWorld>123</HelloWorld>

</Loading>

具體實現呢？ 戳這裏 https://github.com/azl397985856/react-loading/tree/master

文章來源：