formik表单处理框架
引入代码分割最佳方式是通过动态import()
之前模式：
import { add } from './math'
console.log(add(16, 26))
使用之后：
import('./math')
.then(math => {
console.log(math.add(16, 26))
})
webpack解析该语法时会自动进行代码分割。Create React App已配置该功能，Next.js已支持切无需配置。
React.lazy支持想渲染常规组件一样处理动态引入（的组件）
import OtherComponent from './OtherComponent'
使用之后：
const OtherComponent = React.lazy(() => import('./OtherComponent'))
代码会在组件首次渲染时，自动导入包含OtherComponent组件的包。
React.lazy接受一个函数，这个函数需要动态调用import()。它必须返回一个Promise，该Promise需要resolve一个default export的React组件。
然后在Suspense组件中渲染lazy组件，如此使得我们可以使用在等待加载lazy组件时做优雅降级（如loading提示器等）
import React, { Suspense } from 'react'
const OtherComponent = React.lazy(() => import('./OtherComponent'))
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
)
}
fallback属性接受任何在组建过程中你想展示的React元素。你可以将Suspense组件置于懒加载组件之上的任何位置。
默认情况下组件切换会显示兜底组件，使用startTransitionAPI可以在切换之前显示旧组建而不是兜底UI。
import React, { Suspense } from 'react'
import Tabs from './Tabs'
import glimmer from './Glimmer'
const Comments = React.lazy(() => import('./Comments'))
const Photos = React.lazy(() => import('./Photos'))
fucntion MyComponent() {
const [tabs, setTab] = React.useState('photos')
function handleTabsSelect(tab) {
startTransition(() => {
setTab(tab)
})
}
return (
<div>
<Tabs onTabSelect={handleTabSelect}/>
<Suspense fallback={<Glimmer />}>
{tab === 'photos' ? <Photos /> : <Comments />}
</Suspense>
</div>
)
}