React.lazy？ 但是，如果您没有组件怎么办？

老实说，这段代码拆分已经有点累了。 我们大家走来走去，这是主要问题。

代码拆分从模块级别的分离开始，到组件级别的分离结束。

而且这里的问题完全在脑子里-React.lazy很好，但是导入并没有消失 ...那么为什么代码仅在组件上拆分？

React.lazy，React-Loadable，Loadable-Components，Imported-component-世界上有许多库将模块加载包装在一些糖中，只是为了稍微方便用户地处理组件加载并显示就绪状态。 异步加载程序的最小代码。

const loadable = (loaderFunction) => class AsyncComponent extends React.Component { state = { ResultComponent: null, error: false, }; componentWillMount() { loaderFunction .then(result => this.setState({ ResultComponent: result.default || result})) // "es6" default export .catch(() => this.setState({ error: true }); } render() { const { error, ResultComponent } = this.state; // Display loaded component return ResultComponent ? <ResultComponent {...this.props}/> : (error ? <ErrorComponent /> : <LoadingComponent />) } } 

Suspense和React.lazy只是使用状态的另一种方式。 没什么

但是，如果没有组件怎么办？

似乎没有问题-import（“ someStuff”）。然后（'go-on'） 。 但是，这里又有一个问题开始，即如何将其正确放置在React生命周期中，该怎么做，组件失效后诺言是否已解决，等等。 并且所有的头部都是一个组成部分。

我进行了一次小型调查-NOBODY不再使用此最旧的代码拆分版本。 不知道如何在现代条件下食用。 通常，一切都不好。

有一个解决方案，并在4行中再次显示-renderProps

一切都很简单-尽管代码拆分的对象不是Component而是Module，但Component仍然是操作的地方。

 const loadableModule = (loaderFunction) => class AsyncComponent extends React.Component { state = { ResultComponent: null, error: false, }; componentWillMount() { loaderFunction .then(result => this.setState({ module: result.default || result})) // "es6" default export .catch(() => this.setState({ error: true }); } render() { const { error, module } = this.state; return module // pass it as a render prop! ? this.props.children(module) // pass it as a render prop! : (error ? <ErrorComponent /> : <LoadingComponent />) } } 

相同的模式只是朝着加载代码并将此代码“提供”为renderProps的方向。

开箱即用：

• loadable-components（ loadable.lib ）
  
  

   import loadable from '@loadable/component' const Moment = loadable.lib(() => import('moment')) function FromNow({ date }) { return ( <div> <Moment fallback={date.toLocaleDateString()}> {({ default: moment }) => moment(date).fromNow()} </Moment> </div> ) } 

• react-lodable（ react-loadable-library ）
  
  

   import {importedLibraryDefault} from 'react-loadable-library'; const Moment = importedLibraryDefault( () => import('momentjs')); <Moment> { (momentjs) => <span> {momentjs(date).format(FORMAT)}</span> } </Moment> 

• react-imported-component（ react-imported-library ）
  
  

   //    react-loadable-library,   Suspense 

便宜又很生气。 这使我又削减了20％。 但是，最重要的是，它允许非常声明性地设置代码拆分，这将仅加载所需的内容和必要的时间。

现在您的行动，％用户名％。

谁会在钩子上重写它？