React源码阅读-6_037

React源码阅读-6lazyReact.lazy函数允许你像渲染常规组件一样处理动态导入的（组件）。React.lazy接受一个动态调用import()的函数。它必须返回需要解析默认导出的React组件的Promise。React.lazy并不适合SSRimporttype{LazyComponent,Thenable}from'shared/ReactLazyComponent';import{REACT_LAZY_TYPE}from'shared/ReactSymbols';importwarningfrom'shared/warning';exportfunctionlazy(ctor:()=>Thenable):LazyComponent{letlazyType={$$typeof:REACT_LAZY_TYPE,_ctor:ctor,//React使用这些字段来存储结果。_status:-1,_result:null,};if(__DEV__){//在生产中，这只会将它设置在对象上。让defaultProps；让propTypes；Object.defineProperties(lazyType,{defaultProps:{configurable:true,get(){returndefaultProps;},set(newDefaultProps){warning(false,'React.lazy(...):不支持分配`defaultProps`to'+'惰性组件导入。要么在定义组件'+'的地方指定它们，要么创建一个包装c它周围的成分。',);defaultProps=newDefaultProps;//更紧密地匹配生产行为：Object.defineProperty(lazyType,'defaultProps',{enumerable:true,});},},propTypes:{configurable:true,get(){returnpropTypes;},set(newPropTypes){warning(false,'React.lazy(...):不支持将`propTypes`分配给'+'惰性组件导入。要么在定义组件'+'的地方指定它们，或者围绕它创建一个包装组件。',);propTypes=newPropTypes;//更紧密地匹配生产行为：Object.defineProperty(lazyType,'propTypes',{enumerable:true,});},},});}returnlazyType;}使用前importOtherComponentfrom'./OtherComponent';使用后constOtherComponent=React.lazy(()=>import('./OtherComponent'));组件第一次渲染时，自动导入包含OtherComponent组件路由拆分代码的包';constHome=lazy(()=>import('./routes/Home'));constAbout=lazy(()=>import('./routes/About'));constApp=()=>(Loading...