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

這篇文章主要講解了“React Suspense前后端IO異步操作處理的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“React Suspense前后端IO異步操作處理的方法”吧！

簡單介紹Suspense

Suspense主要用來解決網絡IO問題，它早在2018年的React 16.6.0版本中就已發布。它的相關用法有些已經比較成熟，有的相對不太穩定，甚至經歷了重命名、刪除：

• 在render函數中，我們可以寫入一個異步請求，請求數據

• react會從我們緩存中讀取這個緩存

• 如果有緩存了，直接進行正常的render

• 如果沒有緩存，那么會拋出一個異常，這個異常是一個promise

• 當這個promise完成后（請求數據完成），react會繼續回到原來的render中（實際上是重新執行一遍render），把數據render出來

• 完全同步寫法，沒有任何異步callback之類的東西

如果你還沒有明白這是什么意思那我簡單的表述成下面這句話：

調用render函數->發現有異步請求->懸停，等待異步請求結果->再渲染展示數據

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

Suspense主要用法和場景

在前端開發中，經常會有這樣的需求，加載某個界面時，如果界面的資源比較大，前端對數據的處理也需要時間，加載比較慢，這時候我們需要用一個加載動畫或者提示，使得交互更加友好。

一. React18之前的做法

在React18之前，我們要實現上面這個效果，請求數據或者加載新的組件的時機一般在componentDidMount，在State中需要一個flag變量來記錄請求數據的狀態，后續手動更改這個狀態，非常的不方便。代碼如下：

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() 允許你定義一個動態加載的組件。這有助于縮減 bundle 的體積，并延遲加載在初次渲染時未用到的組件

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

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

2.React.Suspense

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

// 該組件是動態加載的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 顯示 <Spinner> 組件直至 OtherComponent 加載完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense> 
  );
}

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

因為沒有后端邏輯，前端表格組件主要用于在前端對 Excel、Grid 表格數據在線編輯和展示，而利用Suspense的技術特點，便可以輕松實現前后端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異步操作處理的方法”的內容了，經過本文的學習后，相信大家對React Suspense前后端IO異步操作處理的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！