美文网首页
React.lazy的使用方法

React.lazy的使用方法

作者: may505 | 来源:发表于2019-07-20 17:51 被阅读0次

平时一般引入组件都是

import OtherComponent from './OtherComponent '

我们也可以使用React.lazy提供的懒加载方法动态加载组件,例如

import React from 'react';
const OtherComponent = React.lazy(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(import('./OtherComponent'));
    }, 2000);
  });
});

class LazyComponent extends React.Component {
  render() {
    return (
      <div>
        <React.Suspense fallback={'加载中'}>
          <OtherComponent />
        </React.Suspense>
      </div>
    );
  }
}
export default LazyComponent;

但是值得注意的是React.lazy方法需要返回一个Promis,React.lazy方法需结合Suspense使用效果最佳。Suspense组件的fallback方法用于组件没有加载完成时页面的显示,可以更好的交互

相关文章

网友评论

      本文标题:React.lazy的使用方法

      本文链接:https://www.haomeiwen.com/subject/rdvulctx.html