bootd
@bootd
Гугли и ты откроешь врата знаний!

Что заставляет или может заставлять перерисовываться компонент?

Добрый вечер. Есть у меня такая вот напасть, я плохо знаю реакт, можно сказать вообще его не знаю. Но волею судьбы пришла ко мне задача, сделать пару правок в реакт приложении.

Правки в нужном компоненте я сделал, но оказалось, что компонент родитель, перерисовывается, т.к. логика игры завязана на таймере.

Я очень досконально изучал кодовую базу, но так и не смог понять, из за чего. Пошёл простым путём, стал по иерархии компонентов в console.log выводить метки, дабы точно найти компонент, который перерисовывается, что бы начать изучать его. Перерисовывается только компонент родитель, как описал выше.

function AZoneContainer({id: zoneId, number: numberId}: TProps) {
    const dispatch = useDispatch();
    const {canClickZone, zoneProps} = useZoneContainer({zoneId});
    const useZoneClickCommand = useZoneClickCommandFactory();
    const onZoneClick = useZoneClickCommand({zoneId});

    const handleClickZone = React.useCallback(() => {
        if (canClickZone) {
            onZoneClick();
        }
    }, [canClickZone, onZoneClick]);
    
    const ZoneComponent = useAZoneFactory({zoneId});
    const ZonePreviewComponent = useZonePreviewFactory();

    const injectedProps = {
        ...zoneProps,
        onDoubleClick: handleClickZone,
    };

    const ToRender = ZoneComponent || ZonePreviewComponent;
    const {threatResult} = Boolean(zone && state) && selectZoneBet(state, zone.id);
    const isMobileSize = window.innerWidth <= 900;

    const stageTutorial = localStorage.getItem('stageTutorial');
    const stage = useSelector(selectActiveStage);
    const zone = useSelector(selectActiveZone);
    const zoneList = useSelector(selectZoneList);
    const presBlocks = useSelector(selectPresentationBlocks);
    const state = useSelector((state) => state);

    const isGameReport = stage && stage === STAGE_LIST.GAME_REPORT;
    const isThreatOpened = stage && stage === STAGE_LIST.THREAT_OPENED;
    const isShowingZone = stage && stage === STAGE_LIST.SHOWING_ZONE;
    
    console.log('render')

    let renderBG = () => {
        if (isShowingZone) {
            if (zone && zone.isThreat) {
                return <div className="a-zone-container__threat-bg" />;
            }
            if (zone && !zone.isThreat) {
                return <div className="a-zone-container__safe-bg" />;
            }
        }
        return <div className="a-zone-container__tutorial-bg" />;
    };

    const handleLearnMoreButton = () => {
        dispatch(showModal(LEARN_MORE_MODAL));
    };

    async function returnToAllMap() {
        if ('2' === localStorage.getItem('stageTutorial')) {
            await dispatch(startTimer());
            localStorage.setItem('stageTutorial', 'skip');
        }

        if (isShowingZone) {
            dispatch(goNextStage());
        } else {
            dispatch(actionReturnToBase());

            if (isMobileSize) {
                dispatch(setActiveZone(zoneList[0].id));
            } else {
                dispatch(setActiveZone(null));
            }
        }
    }

    const activePresBlock = presBlocks && zone && presBlocks[zone.ppSlideId];

    const slides = activePresBlock
        ? activePresBlock.slideList.map((slide) => {
              return slide.image;
          })
        : [];

    if (isShowingZone && zone && slides && threatResult) {
        if (0 > threatResult && zone.effectList.negative.imageRetina) {
            slides.unshift(zone.effectList.negative.imageRetina);
        }
        if (0 <= threatResult && zone.effectList.positive.imageRetina) {
            slides.unshift(zone.effectList.positive.imageRetina);
        }
    }

    return (
     ...
    )
}


Удалял весь html в return, но не помогло, в консоль всё равно выводится render.
Помогите понять, что в коде компонента исходя из кода выше, может вызывать обновление этого компонента?
Таймер к этому компоненту напрямую вообще никак не обращается и вроде как никаких данных ему не шлёт.

Надеюсь хоть как-то ясно описал, буду очень рад любой помощи
  • Вопрос задан
  • 47 просмотров
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
Надо найти таймер. Он может быть либо в одном из хуков, которые вызываются в первых строках компонента. Так же он может находиться хрен знает где, и менять редуксовый стейт (неважно что именно, компонент будет перерисовываться на любое изменение в редуксе, потому что есть строка useSelector((state) => state);)
В функции returnToAllMap есть некий startTimer, но не видно где вызывается returnToAllMap
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы