React.lazy 和 @loadable/components 之间有什么区别？

React.lazy 和 @loadable/components 都是用于懒加载组件的库，但是它们有一些不同点。

1. React.lazy 的基本用法

React.lazy 是 React 16.6 引入的一个内置 API，可以用于懒加载组件。下面是一个简单的示例：

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

上面的示例中，使用了 React.lazy，它接受一个函数作为参数，这个函数返回一个动态 import() 方法。当组件挂载到页面上时，React.lazy 会去加载这个组件，如果这个组件被成功加载，它会返回组件的默认导出。

2. @loadable/components 的基本用法

@loadable/components 是一个由 Loadable Components 社区维护的库，它提供了一组 React 组件，用于异步地加载组件。下面是一个简单的示例：

import loadable from '@loadable/component';

const LoadableComponent = loadable(() => import('./LoadableComponent'));

function App() {
  return (
    <div>
      <LoadableComponent />
    </div>
  );
}

export default App;

上面的示例中，使用了 @loadable/components，它接受一个函数作为参数，这个函数返回一个动态 import() 方法。当组件挂载到页面上时，@loadable/components 会去加载这个组件，并在加载完成后返回一个组件，当组件加载失败时，它会返回一个错误组件。

3. 区别点

React.lazy 和 @loadable/components 的主要区别在于以下几点：

• 使用方式不同：React.lazy 使用 React 内部提供的 API，而 @loadable/components 使用一个独立的库。
• 兼容性不同：React.lazy 仅适用于 React 16.6 及以上版本，而 @loadable/components 可以在任何版本的 React 中使用。
• 特性不同：@loadable/components 提供了更多的特性，例如自定义加载中和加载失败的组件，自定义超时时间等。

总的来说，React.lazy 更加简单易用，适用于 React 较新版本的应用；@loadable/components 提供了更多的特性，适用于各种版本的 React 应用。