React中使用Suspense、lazy

先升级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);
}))
WX20190530-233421@2x.png

这比我们以前去判断组件是否加载完,这是一个更便捷的方法。
2、Suspense 就是实现所谓的延迟加载效果,既然要实现延迟的效果,就必然 要有一个提醒的组件,这就是它的属性fallback,这个属性当然可以是一个组件。这比我们以前去写一个一个的loading组件便捷的很多。但是这个组件有个确定,目前只支持组件的加载,对于网络数据的请求,暂不支持。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容