событие DOM ready в React

у меня есть некоторые компоненты, как показано ниже:

Wrapper: оберните загрузчик и страницу

Loader: некоторые анимации

страницы: контент страницы

такой код:

<body>
  <div id="app"></div>
</body>

class Loader extends Component {}

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Loader/>
            <Page />
        );
    }
}

ReactDOM.render(<Wrapper />, document.getElementById('app'));

Я хочу скрыть загрузчик и показать компонент страницы после того, как DOM будет загружен.

Как написать событие DOM ready в реагировать?

как jQuery: $(window).on('ready')

10
domready reactjs

1 ответов

TL; DR если я правильно понимаю, ответ, вероятно, "невозможно". Но есть и другое решение...

вот что я думаю, что вы пытаетесь сделать, описано как серия шагов:

  1. страница начинает загрузку, <Loader /> компонент показывает анимацию "загрузка страницы"

  2. страница закончит загружаться, <Loader /> компонент удален (или скрыт) и <Page /> компонент вставляется (или отображается) с помощью "реальный" контент страницы.

вот проблема: помните, что вы вводите свои компоненты React на страницу следующим образом:

ReactDOM.render(<Wrapper />, document.getElementById('app'));

вы не можете фактически ввести компонент React до загрузки DOM. Так что к тому времени, либо <Loader /> появляется примерно за 2 миллисекунды и исчезает или вообще не появляется (так как DOM уже загружен к тому времени, когда он вводится на страницу).

если вы пытаетесь показать пульсацию или другая простая анимация (например, анимированный GIF), я бы попробовал гибридный подход:

настройте свой HTML следующим образом:

<body>
    <div id="app"><img src="throbber.gif" /></div>
</body>

в теге скрипта включите обработчик событий jQuery "document ready" для загрузки компонента React:

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Page />
        );
    }
}

$(document).ready(function () {
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});

обратите внимание, что я убрал <Loader /> - изображение throbber выполняет работу погрузчика.

идея здесь в том, что пока страница загружается, GIF throbber будет пульсировать, пока DOM не будет загружено, в этот момент событие jQuery document ready запустит & содержимое div#app будет заменен.

Я не пробовал это, но это должны работа, при условии, что реагировать на самом деле заменяет содержание div#app, а не просто добавление к нему. Если это не так, то это простой вопрос изменения обработчика готовности документа на что-то вроде этого:

$(document).ready(function () {
    $('div#app img').remove();
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
12