react 懶加載方案

React中使用Suspense、lazy

拖着蝸牛看風景 關注

0.1682019.05.30 23:42:53 字數 229 閱讀 5,532

先升級react的版本，一定要在16.6以后的版本才可以使用。
main.js

import React, { Component, Suspense, lazy } from 'react';
let TestComp = lazy(()=>import('./test.js'))
export default class Main extends Component {
    render() {
        return(
            <Suspense fallback="正在加載中..."><TestComp /></Suspense>
        )
    }
}

test.js

import React from 'react'

export default () => (<p>這是一個組件</p>)

這樣就可以實現一個懶加載的效果。
說明：
1、lazy(()=>import('./pages/test.js')),這個方法的回調中其實就是包含了一個動態 import，

lazy(()=>import('./pages/test.js').then((res)=> {
  console.log(res);
}))

 

[e-mail]

這比我們以前去判斷組件是否加載完，這是一個更便捷的方法。
2、Suspense 就是實現所謂的延遲加載效果，既然要實現延遲的效果，就必然 要有一個提醒的組件，這就是它的屬性fallback，這個屬性當然可以是一個組件。這比我們以前去寫一個一個的loading組件便捷的很多。但是這個組件有個確定，目前只支持組件的加載，對於網絡數據的請求，暫不支持。

 

 

1人點贊

 

React源碼學習

 

 

"你如果覺得文章對你有幫助？麻煩支持一下，你的支持是對作者努力的肯定！"

贊賞支持 還沒有人贊賞，支持一下