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的一些想要分享和記錄的一些內容，如果存在錯誤的理解或更好的理解方式，希望多多交流
函數)
