转换到 React.lazy 加载组件时闪烁

Question

在此仓库中：https://github.com/tlg-265/react-app-vanilla

$ git clone https://github.com/tlg-265/react-app-vanilla
$ cd react-app-vanilla
$ yarn
$ yarn start

我有一个只有 3 页的虚拟应用程序：{ Page1, Page2, Page3 }。

我的目标是：分割和延迟加载Page3并防止过渡时闪烁。

Page2使用我现有的代码，分割和延迟加载效果很好，但从 转换到时会出现闪烁Page3。

以下是一些主要文件：

React-app-vanilla/src/App.js

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ReactLazyPreload } from './utils/Functions';
import './App.css';

import Page1 from './components/Page1';
import Page2 from './components/Page2';
const Page3 = ReactLazyPreload(() => import(/* webpackChunkName: "page-3" */ './components/Page3'));

function App() {
  return (
    <Router history={window.history}>
      <Switch>
        <Route exact path="/" component={Page1} />
        <Route path="/page-2" component={Page2} />
        <Suspense fallback={"Loading"}>
          <Route path="/page-3" component={Page3} />
        </Suspense>
      </Switch>
    </Router>
  );
}

export default App;

react-app-vanilla/src/components/Page2.js

import React from 'react';
import { ReactLazyPreload } from '../utils/Functions';

const Page3 = ReactLazyPreload(() => import(/* webpackChunkName: "page-3" */ './Page3'));

class Page2 extends React.Component {

  componentDidMount() {
    Page3.preload();
  }

  handleNext = (e) => {
    e.preventDefault();
    this.props.history.push('/page-3');
  };

  render() {
    return (
        <>
        <h1>Page 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida leo in pharetra sagittis. Donec sed tempus ex, nec rhoncus justo. Phasellus auctor diam eleifend, vestibulum justo ac, ultrices ipsum. Donec pretium augue ante, eget eleifend mi vehicula eu. Donec vitae sem erat. Vestibulum tincidunt suscipit ex, vitae condimentum odio ornare in. Vestibulum erat neque, semper sit amet suscipit vel, malesuada in diam. Morbi ut eros eget lectus sodales rhoncus.</p>
        <div style={{ textAlign: 'center' }}>
          <button type="button" onClick={this.handleNext} className="button-next">NEXT</button>
        </div>
      </>
    )
  }
}

export default Page2;

react-app-vanilla/src/utils/Functions.js

import React from "react";

export const ReactLazyPreload = importStatement => {
  const Component = React.lazy(importStatement);
  Component.preload = importStatement;
  return Component;
};

我的最后一次提交是基于我在此链接上找到的一些建议：

https://blog.maximeheckel.com/posts/preloading-views-with-react/

但不幸的是它仍然闪烁。

在这里您可以预览我的更改：

关于如何防止闪烁的任何Page2想法Page 3？

欢迎您按照顶部的说明自行尝试。

谢谢！

Answer 1

这取决于您在加载下一页时要显示的内容。互联网上的许多答案都显示使用带有延迟的加载旋转器来防止闪烁。

我当前使用的方法在渲染页面时更新回退。我不使用<Loading />组件，而是在准备下一页时显示当前安装的页面。

这是演示和源代码。