zoukankan      html  css  js  c++  java
  • React 中的 lazy 和 suspense

     

    我们通过 webpack 或是 rollup 这样工具可以将项目多个 JavaScript 文件最终打包成为一个 bundle 文件。加载一个 js 文件速度要快于加载多个 JavaScript 文件。不过随着 bundle 的体积不断增大,最终造成首次加载时间过长,还有就是加载一些不必要的 javascript 文件。

    所以我们想是否可以对 bundle 文件进行拆分来进行按需加载,就此需求 webpack 和 rollup 都给出自己解决方案,支持代码拆分,也就是 code splitting。

    在 react 我们可以用 import('./Foo.js').then() 方式进行 code 的懒加载。

    下面我们代码简单实现一下如何使用 lazy 和 suspense 来实现懒加载组件。

    import Foo from '../components/Foo';
    import Bar from '../components/Bar'
    export default class LazyPage extends Component {
        render() {
            return (
                <div>
                 
                        <Bar/>
                        <Foo/>
                  
                </div>
            )
        }
    }
    
    import('../components/Bar')
    

    通过 React.lazy 实现组件的懒加载

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

    这是会提醒错误,让我们配合 lazy 来使用 suspense.

    export default class LazyPage extends Component {
        render() {
            return (
                <div>
                    <Suspense fallback={<div>loading...</div>}>
                        <Bar/>
                        <Foo/>
                    </Suspense>
                </div>
            )
        }
    }
    

    通过使用 Suspense 标签将要进行 lazy(懒加载)的组件进行包裹,然后在 callback 函数中给出加载过程中处理方式,也就是加载过程中的行为。

  • 相关阅读:
    服务器基础安全配置
    PhpStorm服务激活
    MySQL快速生成本地测试数据
    mac上php版本切换
    保存修改数据记录(数据库)
    java面向对象整理
    用JavaScript实现表格编辑器
    循环之 打鱼还是晒网这是个问题
    循环之圆周率计算次数
    JAVASE 循环 之 计算各位上数字的和
  • 原文地址:https://www.cnblogs.com/Mine-/p/14098596.html
Copyright © 2011-2022 走看看