反应页面更新答案

【问题标题】：React page update反应页面更新
【发布时间】：2022-11-20 22:25:07
【问题描述】：

我正在以比萨饼的形式为我的 React 应用程序制作一个加载器，每秒钟都会丢失一块。

当我刷新页面时，我的加载器运行不正常。图像同时出现。

下面是我的组件的代码：

import React, {useEffect, useState} from 'react';
import './Loader.css'
import pizza0 from '../../images/loader/pizza0.png'
import pizza1 from '../../images/loader/pizza1.png'
import pizza2 from '../../images/loader/pizza2.png'
import pizza3 from '../../images/loader/pizza3.png'
import pizza4 from '../../images/loader/pizza4.png'
import pizza5 from '../../images/loader/pizza5.png'

const Loader = () => {
    const [imageStatus, setImageStatus] = useState({zero: true, first: false, second: false, third: false, fourth: false, fifth: false})
    const [currentImage, setCurrentImage] = useState(0)

    useEffect(() => {
        setTimeout(() => action(), 1000);
        const newCurrentImage = currentImage === 5 ? 0 : currentImage + 1
        setCurrentImage(newCurrentImage)
    }, [imageStatus])

    function action() {
        switch (currentImage) {
            case 0:
                setImageStatus({...imageStatus, zero: false, first: true})
                break;
            case 1:
                setImageStatus({...imageStatus, first: false, second: true})
                break;
            case 2:
                setImageStatus({...imageStatus, second: false, third: true})
                break;
            case 3:
                setImageStatus({...imageStatus, third: false, fourth: true})
                break;
            case 4:
                setImageStatus({...imageStatus, fourth: false, fifth: true})
                break;
            case 5:
                setImageStatus({...imageStatus, fifth: false, zero: true})
                break;
        }
    }

    function PizzaImg0() {
        return (
            <img src={pizza0} className={imageStatus.zero ? "pizza active" : "pizza"}/>
        );
    }

    function PizzaImg1() {
        return (
            <img src={pizza1} className={imageStatus.first ? "pizza active" : "pizza"}/>
        );
    }

    function PizzaImg2() {
        return (
            <img src={pizza2} className={imageStatus.second ? "pizza active" : "pizza"}/>
        );
    }

    function PizzaImg3() {
        return (
            <img src={pizza3} className={imageStatus.third ? "pizza active" : "pizza"}/>
        );
    }

    function PizzaImg4() {
        return (
            <img src={pizza4} className={imageStatus.fourth ? "pizza active" : "pizza"}/>
        );
    }

    function PizzaImg5() {
        return (
            <img src={pizza5} className={imageStatus.fifth ? "pizza active" : "pizza"}/>
        );
    }

    return (
        <div>
            <PizzaImg0/>
            <PizzaImg1/>
            <PizzaImg2/>
            <PizzaImg3/>
            <PizzaImg4/>
            <PizzaImg5/>
        </div>
    );
};

export default Loader;

而且非常简单的CSS

.pizza {
    height: 120px;
    display: none;
}

.pizza.active {
    display: flex;
}

同时，如果我切换到另一个选项卡或打开一个 IDE，然后返回到页面，加载器工作正常。当我离开然后返回页面时，React 有什么变化？我该怎么做才能摆脱这个问题？

【问题讨论】：

标签： reactjs

【解决方案1】：

当currentImage改变时在不同的useEffect中触发动作方法

useEffect(() => {
    const newCurrentImage = currentImage === 5 ? 0 : currentImage + 1
    setCurrentImage(newCurrentImage)
}, [imageStatus])

useEffect(() => {
    setTimeout(() => action(), 1000); 
}, [currentImage])

【讨论】：

【解决方案2】：

您无需重复创建图像标签。您可以将 src 存储在 ref 中，因为它不会更改，也不会影响渲染并具有活动 src 的状态。是这样的：

import React, { useEffect, useState, useRef } from 'react'
import './Loader.css'
import pizza0 from '../../images/loader/pizza0.png'
import pizza1 from '../../images/loader/pizza1.png'
import pizza2 from '../../images/loader/pizza2.png'
import pizza3 from '../../images/loader/pizza3.png'
import pizza4 from '../../images/loader/pizza4.png'
import pizza5 from '../../images/loader/pizza5.png'

const Loader = () => {
  const imageSrcs = useRef([pizza0, pizza1, pizza2, pizza3, pizza4, pizza5])
  const [currentImage, setCurrentImage] = useState(0)

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setCurrentImage((prevValue) => (prevValue === 5 ? 0 : prevValue + 1))
    }, 1000)

    return () => clearTimeout(timeoutId)
  }, [])

  return (
    <div>
      <img src={imageSrcs.current[currentImage]} className={'pizza active'} />
    </div>
  )
}

export default Loader

【讨论】：