React v16.6.0已经发布快一年了，为保障项目迭代发布，没有及时更新react版本，最近由于开启了新项目，于是使用新的react版本进行了项目开发。项目工程如何搭建，如何满足兼容性要求，如何规范化等等这里不作为介绍重点，这里想说一下react的lazy，suspense，这块在react官网作为code-splitting重点说明过，可见其出现的意义。
官网写的比较详细，总结起来就是，如果你项目中使用webpack或browserify进行打包，随着工程项目的增长和大量三方库的引入，会使你打包后的文件逐渐变大，用户加载文件时，会花大量时间去加载他们并不关心的内容，而此时，懒加载React.lazy的概念就应运而生。
注意：官网提示React.lazy并不适合SSR
这里介绍基于路由的懒加载，也是比较常用的方式，React.lazy只要一句话就能实现，如下：
const OtherComponent = React.lazy(async () => import('./OtherComponent'));lazy中的函数返回Promise对象，引入了导出React Component的文件，并且官方提示为了有过度效果，还提供了Suspense组件，而且如果不引入的话还会报错，如下：
<Suspense fallback={<div>Loading...</div>}><OtherComponent />
</Suspense>以上都是官网示例，在项目实际使用中，还没有单独对功能组件进行懒加载，可以依据业务租组件的复杂度决定是否使用懒加载，个人觉得路由的懒加载是有必要的。使用中我们用高阶组件进行Suspense的封装：
const WithLazyLoad = (WrappedComponent: React.ComponentType<any>) =>class HOC extends React.Component {private displayName = `HOC(${getDisplayName(WrappedComponent)})`;public render() {console.log(this.displayName)return (<React.Suspense fallback={<div>Loading...</div>} ><WrappedComponent {...this.props} /></React.Suspense> )}};在App.tsx中对路由进行定义，这里假设有三个路由地址：
const About = React.lazy(() => import('./components/About/About'));
const Hello = React.lazy(() => import('./components/Hello/Hello'));
const Home = React.lazy(() => import('./components/Home/Home'));class App extends React.Component {public render() {return (<BrowserRouter><Switch><Route path="/" exact={true} component={WithLazyLoad(Hello)} /><Route path="/home" exact={true} component={WithLazyLoad(Home)} /><Route path="/about" exact={true} component={WithLazyLoad(About)} /></Switch></BrowserRouter>);}
}以上两步，就完成了基本功能对实现，我们来看下效果
使用lazy后会根据路由打包成多个chunk文件，进行按需加载。我们打印懒加载的组件信息，返回的是个对象，示意如下：
主要属性说明：
$$typeof：对象类型，包括Symbol(react.lazy)、Symbol(react.element)、Symbol(react.portal)等等，在react源码中有定义
_ctor：懒加载异步函数，返回Promise对象，即 async () => import('./Home')
_result：存储懒加载异步函数执行的结果，可能值为error、moduleObject.default(即ƒ Home())
_status：当前状态，初始值(-1)、Pending(0)、Resolved(1)、Rejected(2)查看react源码，在react-dom.js文件下的beginWork函数中，可以看到LazyComponent的加载方式其实是调用了mountLazyComponent函数，
switch (workInProgress.tag) {// ...case LazyComponent:{var _elementType = workInProgress.elementType;return mountLazyComponent(current$$1, workInProgress, _elementType, updateExpirationTime, renderExpirationTime);}// ...
}查看mountLazyComponent函数，最重要的地方是，下面会分步解析：
// 解析lazy component
var Component = readLazyComponentType(elementType);
// Store the unwrapped component in the type.
workInProgress.type = Component;
// 获取Component类型，可能值ClassComponent、FunctionComponent、ForwardRef、MemoComponent、IndeterminateComponent
var resolvedTag = workInProgress.tag = resolveLazyComponentTag(Component);
// 初始化props
var resolvedProps = resolveDefaultProps(Component, props);首先看readLazyComponentType函数，其参数elementType为上面打印出的对象，返回懒加载的组件，下面列出了关键代码，_thenable执行ctor()异步函数，拿到import的组件函数即f home()，拿到后暂存于workInProgress.type：
function readLazyComponentType(lazyComponent) {var status = lazyComponent._status;var result = lazyComponent._result;switch (status) {// ...default:{lazyComponent._status = Pending;var ctor = lazyComponent._ctor;var _thenable = ctor();_thenable.then(function (moduleObject) {if (lazyComponent._status === Pending) {var defaultExport = moduleObject.default;{if (defaultExport === undefined) {warning$1(false, 'lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %snnYour code should look like: n ' + "const MyComponent = lazy(() => import('./MyComponent'))", moduleObject);}}lazyComponent._status = Resolved;lazyComponent._result = defaultExport;}}, function (error) {if (lazyComponent._status === Pending) {lazyComponent._status = Rejected;lazyComponent._result = error;}});// Handle synchronous thenables.switch (lazyComponent._status) {case Resolved:return lazyComponent._result;case Rejected:throw lazyComponent._result;}lazyComponent._result = _thenable;throw _thenable;}}
}
随后执行resolveLazyComponentTag函数，入参为readLazyComponentType拿到的结果Component，由于我们的返回的是f home()，所以直接用shouldConstruct判断Component的原型上是否有isReactComponent，如果存在则为class组件，否则为函数组件，代码如下：
function resolveLazyComponentTag(Component) {if (typeof Component === 'function') {return shouldConstruct(Component) ? ClassComponent : FunctionComponent;} else if (Component !== undefined && Component !== null) {var $$typeof = Component.$$typeof;if ($$typeof === REACT_FORWARD_REF_TYPE) {return ForwardRef;}if ($$typeof === REACT_MEMO_TYPE) {return MemoComponent;}}return IndeterminateComponent;
}之后执行resolveDefaultProps，初始化默认的props
function resolveDefaultProps(Component, baseProps) {if (Component && Component.defaultProps) {// Resolve default props. Taken from ReactElementvar props = _assign({}, baseProps);var defaultProps = Component.defaultProps;for (var propName in defaultProps) {if (props[propName] === undefined) {props[propName] = defaultProps[propName];}}return props;}return baseProps;
}执行完上面的方法，懒加载的前期工作就差不多完成了，下面根据resolvedTag进行组件刷新，我们这里是ClassComponent，所以重点看这块的更新方法updateClassComponent，下面我们逐段分析该方法
switch (resolvedTag) {// ...case ClassComponent:{child = updateClassComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);break;}// ...}updateClassComponent方法首先做了propTypes的校验（如果在组件中设置了的话），注意无法在CreateElement中验证lazy组件的属性，只能在updateClassComponent中进行验证。
{if (workInProgress.type !== workInProgress.elementType) {var innerPropTypes = Component.propTypes;if (innerPropTypes) {checkPropTypes(innerPropTypes, nextProps, // Resolved props'prop', getComponentName(Component), getCurrentFiberStackInDev);}}}然后检查是否有context，如果有的话则设置Provider，并监听变化，随后执行实例化，最后执行finishClassComponent方法，进行Component的render，即CreateElement，渲染到dom上
var hasContext = void 0;if (isContextProvider(Component)) {hasContext = true;pushContextProvider(workInProgress);} else {hasContext = false;}prepareToReadContext(workInProgress, renderExpirationTime);// ...constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
// ...var nextUnitOfWork = finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime);Suspense组件的渲染方式类似，也是用updateSuspenseComponent，只不过里面有nextDidTimeout标志，决定是渲染fallback还是其子组件。
上面就是关于React.lazy的一些想要分享和记录的一些内容，如果存在错误的理解或更好的理解方式，希望多多交流
