个人学习整理笔记-----------React新特性之Lazy与Suspense的懒加载

前言

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>
        )
    }
}

总结

啦啦啦------小胖子又涨了一点知识。有看见不对的地方，麻烦告诉我一下哦～谢谢啦～嘻嘻嘻嘻嘻