前言
react的新特性之Lazy与Suspense
react更新过后出现了以下几个新特性:
- Context
- ContextType
- lazy
- Suspense
- Memo
下面进一步的对新特性的----呀呀呀 -搞它 Lazy 与Suspense
Lazy与Suspense概念
我们react 中通常可以用 import('./Foo.js').then()
方式进行 code 的懒加载
解决一些首次加载时间过长,
所以Lazy与Suspense
的定义在webPack中定义为‘ 按需加载,并行加载 ’,也就相当于懒加载。
使用场景
通常我们Lazy 与Suspense 都是一起使用
,单独使用Lazy 会报错,报错的大概意思为懒加载途中有一段Loading.
. 状态,并没有进行处理,页面并不知道应该显示什么,没有对应的信号。这个时候我们就应该使用Suspense
组件包裹Lazy
使用,Suspense
的回调函数可以对其设置当前loading.....
.的显示样式 ,就是加载过程中显示的样式代码如:
懒加载实例-代码
const Foo = React.lazy(() => import('../components/Foo'));
export default class Lazy extends Component {
render() {
return (
<div>
<Suspense fallback={<span> 设置样式</span>}>
<Foo/>
</Suspense>
</div>
)
}
}
总结
啦啦啦------小胖子又涨了一点知识。有看见不对的地方,麻烦告诉我一下哦~谢谢啦~嘻嘻嘻嘻嘻