您好,登錄后才能下訂單哦!
這篇文章主要講解了“React Suspense前后端IO異步操作處理的方法”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“React Suspense前后端IO異步操作處理的方法”吧!
Suspense主要用來解決網(wǎng)絡(luò)IO問題,它早在2018年的React 16.6.0版本中就已發(fā)布。它的相關(guān)用法有些已經(jīng)比較成熟,有的相對不太穩(wěn)定,甚至經(jīng)歷了重命名、刪除:
在render函數(shù)中,我們可以寫入一個(gè)異步請求,請求數(shù)據(jù)
react會(huì)從我們緩存中讀取這個(gè)緩存
如果有緩存了,直接進(jìn)行正常的render
如果沒有緩存,那么會(huì)拋出一個(gè)異常,這個(gè)異常是一個(gè)promise
當(dāng)這個(gè)promise完成后(請求數(shù)據(jù)完成),react會(huì)繼續(xù)回到原來的render中(實(shí)際上是重新執(zhí)行一遍render),把數(shù)據(jù)render出來
完全同步寫法,沒有任何異步callback之類的東西
如果你還沒有明白這是什么意思那我簡單的表述成下面這句話:
調(diào)用render函數(shù)->發(fā)現(xiàn)有異步請求->懸停,等待異步請求結(jié)果->再渲染展示數(shù)據(jù)
看著是非常神奇的,用同步方法寫異步,而且沒有yield/async/await,簡直能把人看傻眼了。這么做的好處自然就是,我們的思維邏輯非常的簡單,清楚,沒有callback,沒有其他任何玩意,不能不說,看似優(yōu)雅了非常多而且牛逼。
在前端開發(fā)中,經(jīng)常會(huì)有這樣的需求,加載某個(gè)界面時(shí),如果界面的資源比較大,前端對數(shù)據(jù)的處理也需要時(shí)間,加載比較慢,這時(shí)候我們需要用一個(gè)加載動(dòng)畫或者提示,使得交互更加友好。
在React18之前,我們要實(shí)現(xiàn)上面這個(gè)效果,請求數(shù)據(jù)或者加載新的組件的時(shí)機(jī)一般在componentDidMount,在State中需要一個(gè)flag變量來記錄請求數(shù)據(jù)的狀態(tài),后續(xù)手動(dòng)更改這個(gè)狀態(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} /> ); } }
1.React.lazy
React.lazy() 允許你定義一個(gè)動(dòng)態(tài)加載的組件。這有助于縮減 bundle 的體積,并延遲加載在初次渲染時(shí)未用到的組件
const SomeComponent = React.lazy(() => import('./SomeComponent'));
渲染 lazy 組件依賴該組件渲染樹上層的 <React.Suspense> 組件。這是指定加載指示器(loading indicator)的方式。
2.React.Suspense
React.Suspense 可以指定加載指示器(loading indicator),以防其組件樹中的某些子組件尚未具備渲染條件:
// 該組件是動(dòng)態(tài)加載的 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( // 顯示 <Spinner> 組件直至 OtherComponent 加載完成 <React.Suspense fallback={<Spinner />}> <div> <OtherComponent /> </div> </React.Suspense> ); }
因?yàn)闆]有后端邏輯,前端表格組件主要用于在前端對 Excel、Grid 表格數(shù)據(jù)在線編輯和展示,而利用Suspense的技術(shù)特點(diǎn),便可以輕松實(shí)現(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> )
看一下效果:
感謝各位的閱讀,以上就是“React Suspense前后端IO異步操作處理的方法”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對React Suspense前后端IO異步操作處理的方法這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。