Pause React рендеринг - PullRequest
Новая
       36

Pause React рендеринг

1 голос
/ 24 февраля 2020

У меня есть веб-страница на основе React (и Material-UI), которая включает в себя 3D-представление на основе Babylon JS.

Я хочу, чтобы веб-страница была адаптивной (ie адаптируется к различным размеры окон).

Но я также хочу, чтобы пользователь мог нажимать на кнопку Babylon JS (сделанную с помощью @ babylonjs / gui / 2D Button.CreateImageOnlyButton) в 3D-виде, чтобы вывести только 3D-вид в полноэкранный режим ( и сделать остальную часть пользовательского интерфейса невидимым). (Кнопка также может быть нажата в полноэкранном режиме для выхода из полноэкранного режима) 

function MainWindow({root}) {
    var desktopWidth = useMediaQuery('(min-width:1000px)');
    var listWidth = useMediaQuery('(min-width:600px)');
    if (desktopWidth) {
        listWidth = false;
        }
    var mobileWidth =  !(desktopWidth || listWidth);

    return <Fragment>
        {desktopWidth && <DesktopMain root={root} />}
        {listWidth && <ListMain root={root} />}
        {mobileWidth && <MobileMain root={root} />}
        </Fragment>;
    }

Моя проблема в том, что MainWindow перерисовывается при входе в полноэкранный режим. Есть ли способ приостановить рендеринг React, когда 3D-вид находится в полноэкранном режиме?

1 Ответ

1 голос
/ 24 февраля 2020

Вы можете использовать shouldComponentUpdate и сказать ему, чтобы он возвращал false, если вы вошли в полноэкранный режим. В настоящее время в документации указано, что если shouldComponentUpdate возвращает false, метод визуализации будет пропущен. Это не мешает детям выполнять рендеринг, и не гарантируется, что это предотвратит повторный рендеринг. Лучший способ предотвратить повторную визуализацию - это не менять состояние или реквизит.

...