Добрый вечер. Есть у меня такая вот напасть, я плохо знаю реакт, можно сказать вообще его не знаю. Но волею судьбы пришла ко мне задача, сделать пару правок в реакт приложении.
Правки в нужном компоненте я сделал, но оказалось, что компонент родитель, перерисовывается, т.к. логика игры завязана на таймере.
Я очень досконально изучал кодовую базу, но так и не смог понять, из за чего. Пошёл простым путём, стал по иерархии компонентов в
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.
Помогите понять, что в коде компонента исходя из кода выше, может вызывать обновление этого компонента?
Таймер к этому компоненту напрямую вообще никак не обращается и вроде как никаких данных ему не шлёт.
Надеюсь хоть как-то ясно описал, буду очень рад любой помощи