React懒加载解决闪屏问题

2022-02-13

React懒加载是优化工作的必备功能，出现闪屏的原因一般是因为多个懒加载组件共用了展示loading效果的fallback组件。

react_logo

以实例解释，三个需要懒加载的组件AboutModal1、AboutModal1和AboutModal2，以及一个fallback组件SuspenseFallback。

AboutModal1放在舞台上后，再加载其他两个组件，下面这种写法就会出现闪屏：

import React, { useState, lazy, useEffect, Suspense } from 'react';

import SuspenseFallback from '../../loading/Loading';

const AboutModal = lazy(() => import('./modal/About'));
const AboutModal1 = lazy(() => import('./modal/About1'));
const AboutModal2 = lazy(() => import('./modal/About2'));

function Main(props) {
	const [a, setA] = useState(false);
	const [a1, setA1] = useState(false);
	const [a2, setA2] = useState(false);

	// ... 状态更新逻辑

    return (
    	<>
            <Suspense fallback={<SuspenseFallback />}>
				{ a ? <AboutModal /> : null }
				{ a1 ? <AboutModal1 /> : null }
				{ a2 ? <AboutModal2 /> : null }
            </Suspense>
		</>
    )
}

原因其实很简单，懒加载时，Suspense包裹的所有内容会被fallback临时代替，已经放在舞台上的组件也会不见。

正确写法：

import React, { useState, lazy, useEffect, Suspense } from 'react';

import SuspenseFallback from '../../loading/Loading';

const AboutModal = lazy(() => import('./modal/About'));
const AboutModal1 = lazy(() => import('./modal/About1'));
const AboutModal2 = lazy(() => import('./modal/About2'));

function Main(props) {
	const [a, setA] = useState(false);
	const [a1, setA1] = useState(false);
	const [a2, setA2] = useState(false);

	// ... 状态更新逻辑

    return (
    	<>
            <Suspense fallback={<SuspenseFallback />}>
				{ a ? <AboutModal /> : null }
            </Suspense>

            <Suspense fallback={<SuspenseFallback />}>
				{ a1 ? <AboutModal1 /> : null }
            </Suspense>

            <Suspense fallback={<SuspenseFallback />}>
				{ a2 ? <AboutModal2 /> : null }
            </Suspense>
		</>
    )
}

每一个懒加载组件用各自独立的fallback即可。当然，这种写法非必须，如果有些组件互斥，像Modal全屏类型的组件，同一时间通常只会出现一个，就没必要分配独立的fallback。

（版权归cpury.com所有，转载请注明出处。）

WEB开发