使用 React.Suspense 替换 react-loadable

引言

当前大部分 React 应用需要使用 code splitting 的时候，都选择使用优秀的 react-loadable 来处理检测代码段是否已加载。然而，随着React v16.6 的发布，我们有一个非常难得的机会 ，可以删除我们的第三方依赖！

React.Suspense是一个新添加到核心React库中的功能，他的功能基本和 react-loadable 一致，所以不用多说，让我们来看看用 React.Suspense 替换 react-loadable。

首先是 code splitting（代码分割）

如果你不太熟悉这个功能，webpack 基本上可以帮助你把代码打包成多个chunk，当用户打开你的应用的时候，先会下载一个主bundle，然后当用户导航到一些页面包含了其他的逻辑和静态资源的使用，再按需加载这些chunk。但是要手动处理成这个效果非常的复杂，当然这样处理后可以很有效地减少用户的白屏时间，并且让移动端用户有更好的体验。webpack（或者其他解决方案）在这里扮演了一个很重要的角色，他可以在创建这些bundle的时候处理这些复杂的逻辑，并且在需要的时候再去下载他们。所以我们所需要做的就是将该功能合并到我们的应用程序中，这样用户就可以获得无缝的体验。

Step 1： 升级到 React 16.6

对于 v16 的用户来说，可以直接升级到 16.6，但是对于v15的用户来说，请按照官方迁移说明来升级。

Step 2： 确定您的异步组件

在 react-loadable 当中，按需加载可能在长这样：

const Loading = ({ pastDelay }) => {
  if (pastDelay) {
    return <Spinner />;
  }
  return null;
};
 
export const johanAsyncComponent = Loadable({
  loader: () => import(/* webpackChunkName: "johanComponent" */ './johan.component'),
  loading: Loading,
  delay: 200
});

在上面的代码中，我们做了几个事情：

1. 我们定义一个 Loading 组件，用于在请求组件的时间和加载组件以及准备渲染之间显示。
2. johanAsyncComponent 中的loading参数是在请求/响应周期中显示的组件，这里我们定义了一个 自定义Loading组件
3. 设置了一个delay，我们只在加载超过 200 毫秒的时候显示Spinner ，这样做可以很好地避免在请求快速完成时“闪烁”加载中的组件。

Step 3：转换到 React.Suspense

使用 React.Suspense 显然代码更为优雅。

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

1. 我们使用React.lazy封装动态import，类似于第一个示例中的’loading’参数。
2. 我们定义一个React.Suspense组件，其中包含一组fallback JSX，以便在我们等待异步加载时进行渲染。 通常，这将是一个微调器或其他等待指示器。
3. 我们定义了一些 children 的 JSX，这些都是使用 React.lazy 包含的组件。

ok, 到此，其实我们已经实现了和 react-loadable 一样的功能。或许细心的你可能发现了，React.Suspense 没有 delay 参数。是的， React.Suspense 没有在内置支持 delay 功能，因此，即使加载工程只需要几毫秒的时间， fallback也会被执行，就上述代码来说，也就是 Spinner 会闪烁一下，如果资源被加载得非常快得话。就目前而言，我们需要自己在 fallback 得组件中自行处理这些逻辑，例如在 componentDidMount 中设置一个定时器，使其直到将来的某个时间才呈现。

Step 4：加载出错的处理

该如何处理如果出现chunk加载失败的情况呢？

react-loadable

优秀的库当然有内置的方法支持处理加载失败的情况

const Loading = (props) => {
  if (props.error) {
    return <p>Error!</p>;
  } else if (props.pastDelay) {
    return <p>Loading...</p>;
  } else {
    return null;
  }
}

Suspense

在 React 16 当中有一个新的功能Error Boundary，这只是一个可感知错误的组件，它能够从其children中捕获和处理错误。为了处理异步加载的问题，我们可以简单地定义一个自定义的ErrorEdge组件，并将异步组件的使用包装在其中。

<MyCustomErrorBoundary>
  <MyAwesomeAsyncComponent />
</MyCustomErrorBoundary>

最后一步

npm uninstall react-loadable

替换有什么好处？

显然，当我们考虑升级或重构时，我们总是用“它以目前的方式工作得很好”为借口推脱。那么，这是否值得升级？

更小的bundle： react-loadable gzip后大概是 2K，去掉这个第三方库后，所以打包时间并没有减少多少，但是确确实实减少了2K。

增加可维护性：使用 React 的核心库，总比第三方库更容易维护。

总结

总的来说，我不敢说这是一个必须替换的功能，但是考虑到众多的因素，他们两个的功能基本是相同的，而且代码修改也相对比较简单，并不需要做很大的改动，所以建议使用这个新特性来做按需加载。

原文链接：https://objectpartners.com/2018/12/05/migrate-from-react-loadable-to-react-suspense/
原文作者：Mike Plummer

译文地址：https://cloud.tencent.com/developer/article/1381296
译文作者：志航