react按需加载:
-
按需加载是依靠延迟计算思想来优化应用响应性能。
-
react16之后实现懒加载可以使用react.lazy方法,之前是使用react-loadable等一些库
-
react.lazy本质是通过代码拆分的方式,让部分非核心组件延迟加载。
-
react.lazy配合suspense组件一起使用。
(suspense用来懒加载提供过度效果的。在需要懒加载组件的外面使用
Suspense
标签,并在fallback
中声明懒加载组件在加载完成前做的事,即可优化整个页面的交互)const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div> ); }
react性能优化点
- 利用key维持组件结构稳定性,在实际比对节点的更新过程中带有唯一性的ke y能够让react更快的定位到变更的节点,从而做到最小化的更新。 (diff原理)
- 数据比对,让组件避免在非必要的情况下重新渲染,react对于状态更新的比较方式默认是采用<浅>比较的。
- 按需加