Ist es in Ordnung, React.render () im DOM mehrmals zu verwenden?

107

Ich möchte React verwenden, um Komponenten im gesamten DOM mehrmals hinzuzufügen. Diese Geige zeigt, was ich tun möchte, und wirft keine Fehler. Hier ist der Code:

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'));

Ich habe diese Frage gesehen und befürchte, dass ich dadurch riskieren werde, dass sich React-Komponenten gegenseitig stören. Die Antwort auf diese Frage schlägt vor, serverseitiges Rendering zu verwenden, was für mich keine Option ist, da ich serverseitiges Django verwende.

Andererseits ist das, was ich mache, vielleicht in Ordnung, weil ich nur eine Instanz der React-Bibliothek gemountet habe (im Gegensatz zu mehreren Komponenten, die ihre eigene React-Instanz aufrufen)?

Ist diese Art der Verwendung mehrerer DOM-Instanzen eine gute Möglichkeit, React zu verwenden?

reactjs YPCrumble
quelle

Antworten:

120

Ja, es ist vollkommen in Ordnung, React.rendermehrmals auf derselben Seite anzurufen . Wie Sie vorgeschlagen haben, wird die React-Bibliothek selbst nur einmal geladen, aber bei jedem Aufruf von React.renderwird eine neue Komponenteninstanz unabhängig von anderen erstellt. (Tatsächlich ist eine solche Situation auf Websites, die gerade auf React umgestellt werden, nicht ungewöhnlich. Einige Teile der Seite werden mit generiert, React.renderandere nicht.)

Trichter
quelle
9
Genial - es ist auch äußerst hilfreich beim "Aufladen" einer vorhandenen Django-App. Ich möchte Django für den gerenderten Inhalt verwenden, um die SEO zu erhalten, und React für die Benutzerinteraktion mit DOM-Elementen verwenden. Dies macht es super einfach zu erreichen.
YPCrumble
Sie können sich wahrscheinlich auch shouldComponentUpdate ansehen und es könnte in Zukunft die Leistung hochfahren (wahrscheinlich nicht in Ihrem Fall). Hier ist die Referenz: facebook.github.io/react/docs/component-specs.html
Jim
@YPCrumble Wenn die Antwort der Hopper richtig ist, markieren Sie sie bitte
Dana Woodman
Und was ist mit dem Fall, wenn es mehrere ReactDOM.render()gibt, die Komponenten in dieselbe einfügen müssen, divje nachdem, welche Seite Sie öffnen? Insbesondere haben app.jsSie <script src="app.js">auf jeder Seite nur ein hässliches verkettetes Asset . Und das lädt Bibliotheken wie z. B. jQuery, Bootstrap, React und verfügt über Ihren benutzerdefinierten JS-Code und React Components. Wenn Sie besuchen /foo, haben Sie ReactDOM.render(<Foo />, getElemById('content')). Wenn Sie /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) ` besuchen . Sie stören. Wie schaffen Sie das?
Grün
3
@Green Ich bin mir nicht sicher, ob ich verstehe, wenn sich die Komponenten auf separaten Seiten befinden, wie würden sie sich stören? Andernfalls fügen Sie für jede Komponente ein neues Containerelement hinzu, dh:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))
Hopper
3

Dieser Ansatz ist unter dem Gesichtspunkt der Leistung beim Laden von Seiten in Ordnung, es gibt jedoch auch andere Nachteile, und mehrere React-Wurzeln sollten nach Möglichkeit vermieden werden.

  • Verschiedene React-Roots können keinen Kontext gemeinsam nutzen. Wenn Sie zwischen den React-Roots kommunizieren müssen, müssen Sie auf globale DOM-Ereignisse zurückgreifen
  • Sie profitieren weniger von Leistungsoptimierungen wie Time Slicing - Spannung und asynchronem Rendering. Es ist nicht möglich, über React-Wurzelgrenzen hinweg zu suspendieren

Weitere Raeding - https://github.com/facebook/react/issues/12700

Yangshun Tay
quelle