快捷導(dǎo)航

React?Suspense前后端IO異步操作處理

更新時(shí)間：2022年06月16日 17:11:45 作者：葡萄城技術(shù)團(tuán)隊(duì)

這篇文章主要為大家介紹了React?Suspense前后端IO異步操作處理示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

簡(jiǎn)單介紹Suspense

Suspense主要用來(lái)解決網(wǎng)絡(luò)IO問(wèn)題，它早在2018年的React 16.6.0版本中就已發(fā)布。它的相關(guān)用法有些已經(jīng)比較成熟，有的相對(duì)不太穩(wěn)定，甚至經(jīng)歷了重命名、刪除：

在render函數(shù)中，我們可以寫(xiě)入一個(gè)異步請(qǐng)求，請(qǐng)求數(shù)據(jù)
react會(huì)從我們緩存中讀取這個(gè)緩存
如果有緩存了，直接進(jìn)行正常的render
如果沒(méi)有緩存，那么會(huì)拋出一個(gè)異常，這個(gè)異常是一個(gè)promise
當(dāng)這個(gè)promise完成后（請(qǐng)求數(shù)據(jù)完成），react會(huì)繼續(xù)回到原來(lái)的render中（實(shí)際上是重新執(zhí)行一遍render），把數(shù)據(jù)render出來(lái)
完全同步寫(xiě)法，沒(méi)有任何異步callback之類的東西

如果你還沒(méi)有明白這是什么意思那我簡(jiǎn)單的表述成下面這句話：

調(diào)用render函數(shù)->發(fā)現(xiàn)有異步請(qǐng)求->懸停，等待異步請(qǐng)求結(jié)果->再渲染展示數(shù)據(jù)

看著是非常神奇的，用同步方法寫(xiě)異步，而且沒(méi)有yield/async/await，簡(jiǎn)直能把人看傻眼了。這么做的好處自然就是，我們的思維邏輯非常的簡(jiǎn)單，清楚，沒(méi)有callback，沒(méi)有其他任何玩意，不能不說(shuō)，看似優(yōu)雅了非常多而且牛逼。

Suspense主要用法和場(chǎng)景

在前端開(kāi)發(fā)中，經(jīng)常會(huì)有這樣的需求，加載某個(gè)界面時(shí)，如果界面的資源比較大，前端對(duì)數(shù)據(jù)的處理也需要時(shí)間，加載比較慢，這時(shí)候我們需要用一個(gè)加載動(dòng)畫(huà)或者提示，使得交互更加友好。

一. React18之前的做法

在React18之前，我們要實(shí)現(xiàn)上面這個(gè)效果，請(qǐng)求數(shù)據(jù)或者加載新的組件的時(shí)機(jī)一般在componentDidMount，在State中需要一個(gè)flag變量來(lái)記錄請(qǐng)求數(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} />
    );
  }
}

二. React18之后

1.React.lazy

React.lazy() 允許你定義一個(gè)動(dòng)態(tài)加載的組件。這有助于縮減 bundle 的體積，并延遲加載在初次渲染時(shí)未用到的組件

const SomeComponent = React.lazy(() => import('./SomeComponent'));

渲染 lazy 組件依賴該組件渲染樹(shù)上層的 <React.Suspense> 組件。這是指定加載指示器（loading indicator）的方式。

2.React.Suspense

React.Suspense 可以指定加載指示器（loading indicator），以防其組件樹(shù)中的某些子組件尚未具備渲染條件：

// 該組件是動(dòng)態(tài)加載的
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    // 顯示 <Spinner> 組件直至 OtherComponent 加載完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense> 
  );
}

Suspense配合前端表格組件處理前后端IO異步操作

因?yàn)闆](méi)有后端邏輯，前端表格組件主要用于在前端對(duì) 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>
)

看一下效果：