zoukankan      html  css  js  c++  java
  • React.lazy和React.Suspense异步加载组件

    在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件。

    例如:

    const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component'));
     
    export const johanAsyncComponent = props => (
      <React.Suspense fallback={<Spinner />}>
        <johanComponent {...props} />
      </React.Suspense>
    );

    对比react-loadable,React.Suspense还是有一些不足。

    1. 加载组件缺少delay参数,不能解决请求快速完成时的"闪烁"问题(即使加载模块只需要几毫秒的时间, fallback也会被执行,就上述代码来说,也就是 Spinner 会闪烁一下),需要自己封装

    2. 没有内置的加载错误处理方法,需要自己去处理

    3. react-loadable有预加载支持,React.Lazy没有

    仍然推荐使用react-loadable来异步加载组件,暂时不用React.Suspense。

    参考:https://blog.csdn.net/roamingcode/article/details/85946380

  • 相关阅读:
    云计算-MapReduce
    云计算--hbase shell
    云计算--hdfs dfs 命令
    云计算--MPI
    jQuery 效果
    jQuery 效果
    JQuery效果隐藏/显示
    JQuery教程
    六级啊啊啊
    jQuery 安装
  • 原文地址:https://www.cnblogs.com/mengff/p/11969640.html
Copyright © 2011-2022 走看看