React JS - Как лучше добавить компонент React в ReactDOM - PullRequest
Новая
       3

React JS - Как лучше добавить компонент React в ReactDOM

3 голосов
/ 29 мая 2020

Ничего страшного, если я вставлю компонент React прямо в тело документа по id?

Или лучше обернуть его в DIV?

index. js

ReactDOM.render(
    <Provider store={store()}>
        <App/>
    </Provider>,
    document.querySelector("#root")
)

индекс. html

<body class="d-flex flex-column h-100" id="root">
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>

Ответы [ 2 ]

2 голосов
/ 29 мая 2020

Я не рекомендую использовать body как root виртуального DOM по 3 причинам:

  1. body обычно содержит теги скрипта, которые могут включать ваш React logi c. Повторная рендеринг body означает, что вам нужно позаботиться и обо всех своих скриптах, и каждый раз, когда body необходимо повторно рендерить, все ваши скрипты нужно перезагружать снова, что неэффективно, не говоря уже о побочном эффекте перезагрузки Реагировать на код (который у меня нет опыта, чтобы оправдать). Единственный способ избежать этого - поместить все ваши скрипты в header, , что не рекомендуется .
  2. Если вам нужно изменить body, например, добавив классы «modal-open», если вы используете Bootstrap modal, есть и другие решения, такие как с использованием обработчика React или специального прослушивателя событий. для обновления тела.
  3. Обычно продукт веб-приложения не только использует сценарий манипулятора DOM, но также и другие сценарии для бизнес-целей (например, Google Analytics, Analytics. js, Google map). Существуют приложения, которые содержат более 1 скрипта React, работающих независимо. В таких случаях logi c сценария следует разделять, а не связывать вместе. Если есть 2 сценария React, 2 root узлов не должны быть вложенными, чтобы избежать ненужного повторного рендеринга.
0 голосов
/ 29 мая 2020

На моей странице html я использую только одну <div id="root">

После этого: 

ReactDOM.render(element, document.getElementById('root'));

делает все маги c.

ссылка: https://reactjs.org/docs/rendering-elements.html

...