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源码学习

 

 

"你如果觉得文章对你有帮助？麻烦支持一下，你的支持是对作者努力的肯定！"

赞赏支持 还没有人赞赏，支持一下