react代码拆分之react loadable源码浅析

最新推荐文章于 2024-11-15 18:38:13 发布

置顶

杨小事er

最新推荐文章于 2024-11-15 18:38:13 发布

阅读量1.6k

点赞数 1

分类专栏： ReactJs 文章标签： React react-loadable

本文链接：https://blog.csdn.net/qq_25936689/article/details/80180775

版权

本文介绍了React代码拆分库react-loadable的工作原理和使用方法。通过分析源码，探讨了loadable组件的创建过程，包括load函数、createLoadableComponent函数及其内部逻辑。文章强调了import()的异步特性在实现动态加载中的关键作用，并指出react-loadable通过React.createElement() API和Promise对象实现组件的按需加载。最后，作者鼓励读者进一步研究和交流源码分析中的遗漏和错误。

摘要由CSDN通过智能技术生成

在做个人网站的js拆分打包时，最终的解决方案是看着网上的教程手写了Bundle高阶组件来动态加载需要的组件。对于它的运用也仅仅是把路由拆开，访问不同的顶级路由进行动态加载，并没有对其原理进行深入的理解。直到看到了React 的加载 loading 库——react-loadable。

react-loadable是什么？

Loadable提倡基于组件分割代码。

route-centric code splitting is shit, component-centric splitting is cool as shit.

网上的翻译有很多，本文就不过多对readme操作了，简单的介绍一下就是： Loadable 是一个高阶组件（简单来说，就是把组件作为输入的组件。高阶函数就是把函数作为输入的函数。在 React 里，函数和组件有时是一回事），一个可以构建组件的函数（函数可以是组件），它可以很容易的在组件层面分割代码包。

react-loadable怎么用？

下面是github库里readme给的例子。

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'), // 要按需加载的组件，用了import()函数
  loading: Loading,    // 一个无状态组件,负责显示"Loading中"
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

my-loading-component.js

import React from 'react';

export default function

最低0.47元/天解锁文章