使用 React.Suspense 替换 react-loadable
使用 React.Suspense 替换 react-loadable
当前大部分 React 应用需要使用
code splitting的时候，都选择使用优秀的 react-loadable 来处理检测代码段是否已加载。然而，随着React v16.6 的发布，我们有一个非常难得的机会 ，可以删除我们的第三方依赖！
React.Suspense是一个新添加到核心React库中的功能，t他的功能基本和 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
});在上面的代码中，我们做了几个事情：
- 我们定义一个 Loading 组件，用于在请求组件的时间和加载组件以及准备渲染之间显示。
johanAsyncComponent中的loading参数是在请求/响应周期中显示的组件，这里我们定义了一个 自定义Loading组件- 设置了一个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>
);- 我们使用React.lazy封装动态import，类似于第一个示例中的'loading'参数。
- 我们定义一个
React.Suspense组件，其中包含一组fallbackJSX，以便在我们等待异步加载时进行渲染。 通常，这将是一个微调器或其他等待指示器。 - 我们定义了一些 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 的核心库，总比第三方库更容易维护。
总结
总的来说，我不敢说这是一个必须替换的功能，但是考虑到众多的因素，他们两个的功能基本是相同的，而且代码修改也相对比较简单，并不需要做很大的改动，所以建议使用这个新特性来做按需加载。
本文系外文翻译，前往查看
如有侵权，请联系?cloudcommunity@tencent.com?删除。
本文系外文翻译，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。