淺談React異步組件的使用方法

function Index(){     const [ userInfo , setUserInfo ] = React.useState(0)     React.useEffect(()=>{        /* 請(qǐng)求數(shù)據(jù)交互 */        getUserInfo().then(res=>{            setUserInfo(res)        })     },[])     return 
         
{userInfo.name}
;     
 } export default function Home(){     return 
              
 }

function FutureAsyncComponent (){     const userInfo = getUserInfo()     return 
         
{userInfo.name}
;      
 }  /* 未來(lái)的異步模式 */ export default function Home(){    return 
        loading... 
 } >                      

當(dāng)數(shù)據(jù)還沒(méi)有加載完成時(shí)候，會(huì)展示Suspense中 fallback的內(nèi)容，彌補(bǔ)請(qǐng)求數(shù)據(jù)中過(guò)渡效果 ，盡管這個(gè)模式在現(xiàn)在版本中還不能正式使用，但是將來(lái)  React 會(huì)支持這樣的代碼形式。

三 溯源：從componentDidCatch到Suspense

至于Suspense是如何將上述不可能的事情變成可能的呢?這就要從 componentDidCatch 說(shuō)起了，在 React 推出 v16  的時(shí)候，就增加了一個(gè)新生命周期函數(shù) componentDidCatch。如果某個(gè)組件定義了  componentDidCatch，那么這個(gè)組件中所有的子組件在渲染過(guò)程中拋出異常時(shí)，這個(gè) componentDidCatch 函數(shù)就會(huì)被調(diào)用。

componentDidCatch使用

componentDidCatch 可以捕獲異常，它接受兩個(gè)參數(shù)：

1 error —— 拋出的錯(cuò)誤。

2 info —— 帶有 componentStack key 的對(duì)象，其中包含有關(guān)組件引發(fā)錯(cuò)誤的棧信息。

我們來(lái)模擬一個(gè)子組件渲染失敗的情況：

/* 正常組件，可以渲染 */ function Children(){   return 
 hello ,let us learn React 
 }  /* 非React組件，將無(wú)法正常渲染 */ function Children1(){   return  } export default class Index extends React.Component{   componentDidCatch(error,info){       console.log(error,info)   }   render(){     return 
                   
   } }

如上，我們模擬一個(gè)render失敗的場(chǎng)景，將一個(gè)非React組件Children1當(dāng)作正常的React的組件來(lái)渲染，這樣在渲染階段就會(huì)報(bào)錯(cuò)，錯(cuò)誤信息就會(huì)被  componentDidCatch捕獲到，錯(cuò)誤信息如下：

對(duì)于如上如果在渲染子組件的時(shí)候出現(xiàn)錯(cuò)誤，會(huì)導(dǎo)致整個(gè)組件渲染失敗，無(wú)法顯示，正常的組件Children也會(huì)被牽連，這個(gè)時(shí)候我們需要在componentDidCatch做一些補(bǔ)救措施，比如我們發(fā)現(xiàn)  componentDidCatch 失敗，可以給Children1加一個(gè)狀態(tài)控制，如果渲染失敗，那么終止Children1的render。

function ErroMessage(){   return 
渲染出現(xiàn)錯(cuò)誤～
 }  export default class Index extends React.Component{   state={ errorRender:false }   componentDidCatch(error,info){       /* 補(bǔ)救措施 */       this.setState({         errorRender:true       })   }   render(){     return 
              { this.state.errorRender ?  :   }     
   } }

如果出現(xiàn)錯(cuò)誤，通過(guò)setState重新渲染，并移除失敗的組件，這樣組件就能正常渲染了，同樣也不影響Children掛載。componentDidCatch一方面捕獲在渲染階段出現(xiàn)的錯(cuò)誤，另一方面可以在生命周期的內(nèi)部執(zhí)行副作用去挽回渲染異常帶來(lái)的損失。

componentDidCatch原理

componentDidCatch原理應(yīng)該很好理解，內(nèi)部可以通過(guò)try{}catch(error){}來(lái)捕獲渲染錯(cuò)誤，處理渲染錯(cuò)誤。

try {   //嘗試渲染子組件 } catch (error) {   // 出現(xiàn)錯(cuò)誤，componentDidCatch被調(diào)用， }

componentDidCatch思想能否遷移到Suspense上

那么回到我們的異步組件上來(lái)，如果讓異步的代碼放在同步執(zhí)行，是肯定不會(huì)正常的渲染的，我們還是要先請(qǐng)求數(shù)據(jù)，等到數(shù)據(jù)返回，再用返回的數(shù)據(jù)進(jìn)行渲染，那么重點(diǎn)在于這個(gè)等字，如何讓同步的渲染停止下來(lái)，去等異步的數(shù)據(jù)請(qǐng)求呢?拋出異常可以嗎?  異常可以讓代碼停止執(zhí)行，當(dāng)然也可以讓渲染中止。

Suspense 就是用拋出異常的方式中止的渲染，Suspense 需要一個(gè) createFetcher 函數(shù)會(huì)封裝異步操作，當(dāng)嘗試從  createFetcher 返回的結(jié)果讀取數(shù)據(jù)時(shí)，有兩種可能：一種是數(shù)據(jù)已經(jīng)就緒，那就直接返回結(jié)果;還有一種可能是異步操作還沒(méi)有結(jié)束，數(shù)據(jù)沒(méi)有就緒，這時(shí)候  createFetcher 會(huì)拋出一個(gè)“異常”。

這個(gè)“異常”是正常的代碼錯(cuò)誤嗎?非也，這個(gè)異常是封裝請(qǐng)求數(shù)據(jù)的Promise對(duì)象，里面是真正的數(shù)據(jù)請(qǐng)求方法，既然 Suspense  能夠拋出異常，就能夠通過(guò)類似 componentDidCatch的try{}catch{}去獲取這個(gè)異常。

獲取這個(gè)異常之后干什么呢?  我們知道這個(gè)異常是Promise，那么接下來(lái)當(dāng)然是執(zhí)行這個(gè)Promise，在成功狀態(tài)后，獲取數(shù)據(jù)，然后再次渲染組件，此時(shí)的渲染就已經(jīng)讀取到正常的數(shù)據(jù)，那么可以正常的渲染了。接下來(lái)我們模擬一下createFetcher和Suspense

我們模擬一個(gè)簡(jiǎn)單createFetcher

/**  *   * @param {*} fn  我們請(qǐng)求數(shù)據(jù)交互的函數(shù)，返回一個(gè)數(shù)據(jù)請(qǐng)求的Promise   */ function createFetcher(fn){     const fetcher = {         status:'pedding',         result:null,         p:null     }     return function (){       const getDataPromise = fn()       fetcher.p = getDataPromise       getDataPromise.then(result=>{ /* 成功獲取數(shù)據(jù) */          fetcher.result = result           fetcher.status = 'resolve'       })          if(fetcher.status === 'pedding'){ /* 第一次執(zhí)行中斷渲染，第二次 */          throw fetcher       }       /* 第二次執(zhí)行 */       if(fetcher.status)       return fetcher.result     } }

• 返回一個(gè)函數(shù)，在渲染階段執(zhí)行，第一次組件渲染，由于 status = pedding 所以拋出異常 fetcher 給  Susponse，渲染中止。

• Susponse會(huì)在內(nèi)部componentDidCatch處理這個(gè)fetcher，執(zhí)行 getDataPromise.then，  這個(gè)時(shí)候status已經(jīng)是resolve狀態(tài)，數(shù)據(jù)也能正常返回了。

• 接下來(lái)Susponse再次渲染組件，此時(shí)，此時(shí)就能正常的獲取數(shù)據(jù)了。

我們模擬一個(gè)簡(jiǎn)單的Suspense

export class Suspense extends React.Component{    state={ isRender: true  }    componentDidCatch(e){      /* 異步請(qǐng)求中，渲染 fallback */      this.setState({ isRender:false })      const { p } = e      Promise.resolve(p).then(()=>{        /* 數(shù)據(jù)請(qǐng)求后，渲染真實(shí)組件 */        this.setState({ isRender:true })      })    }    render(){      const { isRender } = this.state      const { children , fallback } = this.props      return isRender ? children : fallback    } }

用 componentDidCatch 捕獲異步請(qǐng)求，如果有異步請(qǐng)求渲染  fallback，等到異步請(qǐng)求執(zhí)行完畢，渲染真實(shí)組件，借此整個(gè)異步流程完畢。但為了讓大家明白流程，只是一次模擬異步的過(guò)程，實(shí)際流程要比這個(gè)復(fù)雜的多。

流程圖：

四 實(shí)踐：從Suspense到React.lazy

React.lazy簡(jiǎn)介

Suspense帶來(lái)的異步組件的革命還沒(méi)有一個(gè)實(shí)質(zhì)性的成果，目前版本沒(méi)有正式投入使用，但是React.lazy是目前版本Suspense的最佳實(shí)踐。我們都知道React.lazy配合Suspense可以實(shí)現(xiàn)懶加載，按需加載，這樣很利于代碼分割，不會(huì)讓初始化的時(shí)候加載大量的文件，減少首屏?xí)r間。

React.lazy基本使用

const LazyComponent = React.lazy(()=>import('./text'))

React.lazy接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用 import()。它必須返回一個(gè) Promise ，該 Promise需要 resolve 一個(gè)  default export 的 React 組件。

我們先來(lái)看一下基本使用：

const LazyComponent = React.lazy(() => import('./test.js'))  export default function Index(){    return loading...