React?Suspense前后端IO異步操作處理
簡單介紹Suspense
Suspense主要用來解決網(wǎng)絡IO問題，它早在2018年的React 16.6.0版本中就已發(fā)布。它的相關用法有些已經(jīng)比較成熟，有的相對不太穩(wěn)定，甚至經(jīng)歷了重命名、刪除：
- 在render函數(shù)中，我們可以寫入一個異步請求，請求數(shù)據(jù)
- react會從我們緩存中讀取這個緩存
- 如果有緩存了，直接進行正常的render
- 如果沒有緩存，那么會拋出一個異常，這個異常是一個promise
- 當這個promise完成后（請求數(shù)據(jù)完成），react會繼續(xù)回到原來的render中（實際上是重新執(zhí)行一遍render），把數(shù)據(jù)render出來
- 完全同步寫法，沒有任何異步callback之類的東西
如果你還沒有明白這是什么意思那我簡單的表述成下面這句話：
調(diào)用render函數(shù)->發(fā)現(xiàn)有異步請求->懸停，等待異步請求結果->再渲染展示數(shù)據(jù)
看著是非常神奇的，用同步方法寫異步，而且沒有yield/async/await，簡直能把人看傻眼了。這么做的好處自然就是，我們的思維邏輯非常的簡單，清楚，沒有callback，沒有其他任何玩意，不能不說，看似優(yōu)雅了非常多而且牛逼。
Suspense主要用法和場景
在前端開發(fā)中，經(jīng)常會有這樣的需求，加載某個界面時，如果界面的資源比較大，前端對數(shù)據(jù)的處理也需要時間，加載比較慢，這時候我們需要用一個加載動畫或者提示，使得交互更加友好。
一. React18之前的做法
在React18之前，我們要實現(xiàn)上面這個效果，請求數(shù)據(jù)或者加載新的組件的時機一般在componentDidMount，在State中需要一個flag變量來記錄請求數(shù)據(jù)的狀態(tài)，后續(xù)手動更改這個狀態(tài)，非常的不方便。代碼如下：
class App extends Component {
state = {
isLoading: false,
}
componentDidMount() {
this.setState({
data: null,
isLoading: true,
});
axios.get('/api/getData').then((data) => {
this.setState({
data,
isLoading: false,
});
});
}
render() {
return this.state.loading ? '正在加載中...' : (
<Page data={data} />
);
}
}
二. React18之后
1.React.lazy
React.lazy() 允許你定義一個動態(tài)加載的組件。這有助于縮減 bundle 的體積，并延遲加載在初次渲染時未用到的組件
const SomeComponent = React.lazy(() => import('./SomeComponent'));渲染 lazy 組件依賴該組件渲染樹上層的 <React.Suspense> 組件。這是指定加載指示器（loading indicator）的方式。
2.React.Suspense
React.Suspense 可以指定加載指示器（loading indicator），以防其組件樹中的某些子組件尚未具備渲染條件：
// 該組件是動態(tài)加載的
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
// 顯示 <Spinner> 組件直至 OtherComponent 加載完成
<React.Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</React.Suspense>
);
}
Suspense配合前端表格組件處理前后端IO異步操作
因為沒有后端邏輯，前端表格組件主要用于在前端對 Excel、Grid 表格數(shù)據(jù)在線編輯和展示，而利用Suspense的技術特點，便可以輕松實現(xiàn)前后端IO異步操作：
const PureSpread = React.lazy(() => import('./components/pureSpread'))
const SpreadDesigner = React.lazy(() => import('./components/designer'))
const {Content,Header} = Layout
const App = () => (
<Layout className="app">
<IndexSider/>
<Layout>
<Content className="index-content">
<HashRouter>
<Switch>
<Suspense fallback={<div>loading...</div>}>
<Route exact path="/" component={PureSpread}/>
<Route exact path="/designer" component={SpreadDesigner}/>
</Suspense>
</Switch>
</HashRouter>
</Content>
<IndexFooter/>
</Layout>
</Layout>
)
看一下效果：
了解更多在線demo：https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
以上就是React Suspense前后端IO異步操作處理的詳細內(nèi)容，更多關于React Suspense前后端IO異步的資料請關注腳本之家其它相關文章！
相關文章
使用 React hooks 實現(xiàn)類所有生命周期
react 自 16.8 開始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對應的生命周期，這篇文章主要介紹了使用 React hooks 怎么實現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02
react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實用價值，需要的朋友可以參考下2017-12-12
本文主要介紹了Next+React項目啟動慢刷新慢的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-04-04
這篇文章主要為大家介紹了react源碼中的生命周期和事件系統(tǒng)實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了淺談從React渲染流程分析Diff算法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
這篇文章主要介紹了Electron整合React使用搭建開發(fā)環(huán)境，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下2020-06-06
使用react實現(xiàn)手機號的數(shù)據(jù)同步顯示功能的示例代碼
本篇文章主要介紹了使用react實現(xiàn)手機號的數(shù)據(jù)同步顯示功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了ReactJs設置css樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了淺談React中組件邏輯復用的那些事兒，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
在React項目中,我們經(jīng)常會使用到React自帶的幾個內(nèi)置Hooks，如 useState，useContext和useEffect。雖然在React中找不到這些 Hooks，但React提供了非常靈活的方式讓你為自己的需求來創(chuàng)建自己的自定義Hooks，想了解更多的，歡迎閱讀本文2023-04-04