javascript - Home 组件仅在刷新时加载(而不是在初始加载时)，竞争条件？

Question

我遇到的情况是，第一次加载页面时，应该在 Home.js 中加载的图像没有加载，直到在浏览器上推送刷新(Chrome ).这种情况发生在开发服务器和实时生产服务器中，有时必须多次刷新才能显示图像。

请注意，我对所有 Web 开发以及 React 都是新手，因为我的大部分经验都是在 Android 开发方面。

我认为这与我将图像加载到 Home 组件的方式有关。通过日志记录，我发现图像是在页面加载之前加载的(使用 componentDidMount())，所以我正在寻找任何可用的解决方案。

谢谢，这是代码...

主要.js:

import React from 'react';
import { withRouter, Route, NavLink, HashRouter } from 'react-router-dom';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInstagram, faGithub, faFacebook } from '@fortawesome/fontawesome-free-brands';
import 'bootstrap/dist/css/bootstrap.css';
import Favicon from 'react-favicon';

import Home from './Home';
import Contact from './Contact';
import socialMediaLinks from './utilities/Utils';

class Main extends React.Component {
    constructor() {
        super();
        this.state = { 
            screenWidth: null,
            isMobile: false,
        };
        this.handleResize = this.handleResize.bind(this);
    }

    componentDidMount() {
        window.addEventListener('resize', this.handleResize.bind(this));
        this.handleResize();
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    handleResize() {
        this.setState({ screenWidth: window.innerWidth });
        console.log(`width is ${this.state.screenWidth}`);
    }

    render() {        
        return (
            <HashRouter>
                <div>
                <Favicon url='./favicon.ico' />
                    {/* Navigation */}
                    <nav className='navbar fixed-top bg-dark flex-md-nowrap'>
                            {/* Social Media */}
                            <a className='social-media-link' href={socialMediaLinks['instagram']}><FontAwesomeIcon icon={faInstagram} size='lg' /></a>
                            <a className='social-media-link' href={socialMediaLinks['github']}><FontAwesomeIcon icon={faGithub} size='lg' /></a>
                            <a className='social-media-link' href={socialMediaLinks['facebook']}><FontAwesomeIcon icon={faFacebook} size='lg' /></a>
                            <ul className="header">
                                <li className='nav-option'><NavLink exact to='/'>Home</NavLink></li>
                                <li className='nav-option'><NavLink to='/contact'>About/Contact</NavLink></li>
                            </ul>
                    </nav>
                    {/* Main Page */}
                    <div className='content container-fluid' align='center'>
                        <div className='row'>
                            <Route exact path='/' component={withRouter(Home)} />
                            <Route path='/contact' component={withRouter(Contact)} />
                        </div>
                        <footer>Created by me :)</footer>
                    </div>
                </div>
            </HashRouter>
        );
    }
  }

export default Main;

首页.js:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';

var imageList = [];

function importAll(r) {
    const keys = r.keys();
    let images = {};

    for (var k in keys) {
        images[keys[k].replace('./', '')] = r(keys[k]);
    }

    return images;
}

const images = importAll(require.context('./images/resized/', false, /\.(png|jpe?g|svg)$/));

for (var image in images) {
    var newImage = new Image(images[image], images[image], null);
    newImage.name = images[image];
    newImage.src = images[image];
    imageList.push(newImage);
}

class Home extends React.Component {
    render() {
        let images = imageList.map(image => {
            if (image.naturalHeight > image.naturalWidth) {         // portrait
                return <img className='portrait-img' src={image.src} alt=''/>
            } else if (image.naturalHeight < image.naturalWidth) {  // landscape
                return <img className='landscape-img' src={image.src} alt=''/>
            }
        });

        return (
            <div>
                {images}
            </div>
        );
    }
}

export default Home;

index.css:

body {
    background-color: #FFF;
    padding: 20px;
    margin: 0;
    font-family: Helvetica;
}

h1 {
    color: #111;
    font-weight: bold;
    padding-top: 2px;
}

ul.header li {
    display: inline;
    list-style-type: none;
    margin: 0;
}

ul.header {
    background-color: #111;
    padding: 0;
}

ul.header li a {
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
}

.content {
    background-color: #FFF;
    padding: 20px;
}

.content h2 {
    padding: 0;
    margin: 0;
}

.content li {
    margin-bottom: 10px;
}

.active {
      background-color: #0099FF;
}

.portrait-img {
    max-width: 55%;
    height: auto;
    padding: 5px;
}

.landscape-img {
    max-width: 75%;
    height: auto;
    padding: 5px;
}

.navbar {
    max-height: 110px;
    background-color: #FFCC00 !important;
}

.content {
    padding-top: 80px;
}

footer {
    background-color: #FFF;
    font-size: 7pt;
    position: relative;
    margin: auto;
    float: left;
}

.social-media-link {
    color: #111;
}

::-webkit-scrollbar {
    display: none;
}

@media only screen and (max-width: 500px) {
    h1 {
        font-size: 18pt;
    }

    .navbar {
        max-height: 120px;
    }

    .content {
        padding-top: 104px;
    }

    .header {
        font-size: 10pt;
    }

    .portrait-img {
        max-width: 100%;
        height: auto;
        padding: 2px;
    }

    .landscape-img {
        max-width: 100%;
        height: auto;
        padding: 2px;
    }

    footer {
        font-size: 5pt;
    }

    .social-media-link {
        padding: 5px;
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel='icon' href='../src/favicon.ico' type='image/x-icon' />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import './index.css';

ReactDOM.render(
    <Main />,
    document.getElementById('root'),
);

编辑:

修改了下面的 Home.js 以使用 Promise。这里的想法是，渲染图像的 Promise 将改变 this.state.images 并且该值将在 Component 的 render() 返回的 HTML 中使用.这并不能解决问题，但是，它确实会导致记录 imgs 列表，而不是像以前那样记录 undefined 列表。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import { resolve } from 'q';

var imageList = [];

function importAll(r) {
    const keys = r.keys();
    let images = {};

    for (var k in keys) {
        images[keys[k].replace('./', '')] = r(keys[k]);
    }

    return images;
}

const images = importAll(require.context('./images/resized/', false, /\.(png|jpe?g|svg)$/));

for (var image in images) {
    var newImage = new Image(images[image], images[image], null);
    newImage.name = images[image];
    newImage.src = images[image];
    imageList.push(newImage);
}

class Home extends React.Component {
    constructor(props) {
        super();
        this.state = {
            images: null,
        };
    }

    componentDidMount() {
        let promise = this.getImages();
        promise.then(result => {
            let images = result.map(image => {
                if (image.naturalHeight > image.naturalWidth) {         // portrait
                    return <img className='portrait-img' src={image.src} alt='' />
                } else if (image.naturalHeight < image.naturalWidth) {  // landscape
                    return <img className='landscape-img' src={image.src} alt='' />
                }
            });
            this.setState({ images: images });
        }, function(error) {
            this.setState({ images: error });
        });
    }

    getImages() {
        let promise = new Promise((resolve, reject) => {
            let imageList = [];
            const images = importAll(require.context('./images/resized/', false, /\.(png|jpe?g|svg)$/));
            for (var image in images) {
                var newImage = new Image(images[image], images[image], null);
                newImage.name = images[image];
                newImage.src = images[image];
                imageList.push(newImage);
            }

            if (imageList.length > 0) {
                console.log(imageList);
                resolve(imageList);
            } else {
                console.log('shit');
                reject(Error('oh shit'));
            }
        });

        return promise;
    }

    render() {
        return (
            <div>
                {this.state.images}
            </div>
        );
    }
}

export default Home;

这导致:

硬重载后(ctrl+F5):images = [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]刷新后(ctrl+R):images = [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}] - 都带有 typeof : Symbol(react.element)，类型:“img”。

Answer 1

console.log 不保证是同步的，因此您不能依赖它来确定执行顺序。有些引擎是，有些不是。

我也不会依赖 require.context，尤其是当您使用 create-react-app 时。请参阅:https://github.com/facebook/create-react-app/issues/517

一般来说，如果您的元素已经为 ES 模块设置好并且您发现自己需要 require，那么在我看来，这有点代码味道。 ES 模块的全部意义在于使作用域成为静态的，而不是动态的，这样编译器就可以推断出在缩小时要丢弃什么。目录结构在运行时实际上不再存在；它全部被缩小到一个大文件中，或者由 webpack 开发服务器即时压缩，或者作为生产构建的一部分。

文件是否太多而无法直接导入到模块中？您可以为 imageList 设置一个单独的模块来处理加载并导出它，然后只需 import 并直接在您的组件中使用:

// imageList.js

import foo from './images/foo.jpg'
import bar from './images/bar.jpg'
import baz from './images/baz.jpg'
import blah from './images/blah.jpg'

export default {
  foo,
  bar,
  baz,
  blah,
}

然后您可以进行测试以确保将来不会遗漏任何一个(注意，测试直接在节点中使用文件结构运行，而不是 webpack-ed 最终产品):

// __tests__/imagesList.test.js

import imageList from '../imageList'
import fs from 'fs'
import path from 'path'

const dir = path.join(__dirname, '..', 'images')

it('has all the images', () => {
  const imageFiles = fs.readdirSync(dir).filter((file) => {
    return path.extname(file).match(/\.(png|jpe?g|svg)$/)
  })

  expect(Object.keys(imageList)).toEqual(imageFiles)
})

如果真的太多了，或者它们会经常变化，我通常喜欢在命令行上自动创建代码。下面是快速 n 脏，但应该接近你需要的，具体取决于路径:

#!/usr/bin/env node

const { readdirSync, writeFileSync } = require('fs')
const { extname, join } = require('path')

const relPath = (...paths) => join(__dirname, ...paths)
const dir = relPath('src', 'images')

const printLoaderFile = () => {
  const imageFiles = readdirSync(dir).filter((file) => {
    return extname(file).match(/\.(png|jpe?g|svg)$/)
  })

  const output = []

  imageFiles.forEach((file, index) => {
    output.push(`import image${index} from '${dir}/${file}'`)
  })

  output.push('\nexport default {')
  imageFiles.forEach((file, index) => {
    output.push(`  '${file}': image${index},`)
  })
  output.push('}\n')

  writeFileSync(relPath('src', 'imagesList.js'), output.join('\n'))
}

printLoaderFile()