lazyLoad
组件的懒加载效果,实现起来很简单,代码如下:
// lazy方法使得组件可以懒加载,Suspense组件则可以提供一个加载中的效果
import React, { lazy,Suspense} from 'react'
import Loading from './Loading' // 自定义的加载中组件
// 此时,引入需要懒加载的组件时要这样引入
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))
// ...code
// 用Suspense组件包裹
<Suspense fallback={<Loading/>}>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</Suspense>
效果如下:
PureComponent
React.PureComponent 与 React.Component 几乎完全相同,但React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。
缺点是:可能会因深层的数据不一致而产生错误的否定判断,从而shouldComponentUpdate结果返回false,界面得不到更新。