Czy można używać React.render () wiele razy w DOM?

107

Chcę używać Reacta do wielokrotnego dodawania komponentów w całym DOM. To skrzypce pokazuje, co chcę zrobić, i nie powoduje żadnych błędów. Oto kod:

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

Widziałem to pytanie i obawiam się, że wykonując powyższe, zaryzykuję, że komponenty React będą ze sobą kolidować. Odpowiedź na to pytanie sugeruje użycie renderowania po stronie serwera, co nie jest dla mnie opcją, ponieważ używam Django po stronie serwera.

Z drugiej strony, może to, co robię, jest w porządku, ponieważ mam zamontowaną tylko jedną instancję biblioteki React (w przeciwieństwie do wielu komponentów wywołujących własną instancję React)?

Czy ten sposób korzystania z wielu instancji DOM jest dobrym sposobem na używanie Reacta?

reactjs

— YPCrumble
źródło

Odpowiedzi:

120

Tak, można dzwonić React.renderkilka razy na tej samej stronie. Tak jak zasugerowałeś, sama biblioteka React jest ładowana tylko raz, ale każde wywołanie React.renderspowoduje utworzenie nowej instancji komponentu, niezależnej od innych. (W rzeczywistości taka sytuacja nie jest rzadkością w witrynach, które są w trakcie przechodzenia do React, w których niektóre części strony są generowane przy użyciu, React.rendera inne nie).

— zbiornik
źródło

super - jest również niezwykle pomocny w „doładowaniu” istniejącej aplikacji Django. Chcę używać Django do renderowania treści, aby uzyskać SEO, a Reacta do interakcji użytkownika z elementami DOM. To sprawia, że jest to bardzo proste do osiągnięcia.

— YPCrumble,

prawdopodobnie możesz również spojrzeć na shouldComponentUpdate i może on w przyszłości uruchomić wydajność (prawdopodobnie nie w twoim przypadku). Oto odniesienie: facebook.github.io/react/docs/component-specs.html

— Jim,

@YPCrumble, jeśli odpowiedź hopperów jest prawidłowa, zaznacz to

— Dana Woodman

A co w przypadku, gdy istnieje wiele osób, ReactDOM.render()które muszą wstawiać komponenty w tym samym, w divzależności od otwieranej strony? W szczególności masz tylko jeden ukryty połączony app.jszasób, który znajduje się <script src="app.js">na każdej stronie. I to ładuje biblioteki, powiedzmy, jQuery, Bootstrap, React i ma twój niestandardowy kod JS i komponenty React. Jeśli odwiedzasz /foo, masz ReactDOM.render(<Foo />, getElemById('content')). Jeśli odwiedzasz /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) `. Oni przeszkadzają. Jak sobie z tym radzisz?

— Green

@Green Nie jestem pewien, czy rozumiem, jeśli komponenty są na oddzielnych stronach, jak by przeszkadzały? W przeciwnym razie dlaczego nie dodać nowego elementu kontenera dla każdego komponentu, np .:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— lej samowyładowczy

To podejście jest dobre z punktu widzenia wydajności ładowania strony, ale są też inne wady i jeśli to możliwe, należy unikać wielu korzeni React.

Różne korzenie Reacta nie mogą współdzielić kontekstu, a jeśli potrzebujesz komunikować się między korzeniami Reacta, będziesz musiał skorzystać z globalnych zdarzeń DOM
Otrzymujesz mniejsze korzyści z optymalizacji wydajności, takich jak podział czasu - suspense i asynchroniczne renderowanie. Nie jest możliwe zawieszenie poza granicami katalogu głównego React

Więcej raeding - https://github.com/facebook/react/issues/12700

— Yangshun Tay
źródło