¿Está bien usar React.render () varias veces en el DOM?

107

Quiero usar React para agregar componentes varias veces en todo el DOM. Este violín muestra lo que estoy buscando hacer y no arroja ningún error. Aquí está el código:

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

He visto esta pregunta y me temo que al hacer lo anterior, me arriesgaré a que los componentes de React interfieran entre sí. La respuesta a esa pregunta sugiere usar la representación del lado del servidor, que no es una opción para mí, ya que estoy usando el lado del servidor de Django.

Por otro lado, tal vez lo que estoy haciendo esté bien porque solo tengo una instancia de la biblioteca React montada (a diferencia de varios componentes que llaman a su propia instancia de React).

¿Es esta forma de usar múltiples instancias DOM una forma correcta de usar React?

reactjs

— YPCrumble
fuente

Respuestas:

120

Sí, está perfectamente bien llamar React.rendervarias veces en la misma página. Tal como sugirió, la biblioteca React en sí solo se carga una vez, pero cada llamada a React.rendercreará una nueva instancia de componente independiente de las demás. (De hecho, esta situación no es infrecuente en sitios que están en proceso de transición a React, donde algunas partes de la página se generan usando React.rendery otras no).

— tolva
fuente

impresionante - también es extremadamente útil para "sobrecargar" una aplicación Django existente. Quiero usar Django para el contenido renderizado para obtener el SEO, y usar React para la interacción del usuario con elementos DOM. Esto lo hace muy simple de lograr.

— YPCrumble

probablemente también pueda mirar shouldComponentUpdate y podría arrancar el rendimiento en el futuro (probablemente no en su caso). Aquí está la referencia: facebook.github.io/react/docs/component-specs.html

— Jim

@YPCrumble si la respuesta de las tolvas es correcta, márquela

— Dana Woodman

¿Y qué pasa con el caso en el que hay varios ReactDOM.render()que tienen que insertar componentes en el mismo en divfunción de la página que abras? En particular, solo tiene un app.jsactivo concatenado desagradable <script src="app.js">en cada página. Y eso carga libs, digamos, jQuery, Bootstrap, React y tiene su código JS personalizado y React Components. Si visitas /foo, tienes ReactDOM.render(<Foo />, getElemById('content')). Si visita /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) `. Interfieren. ¿Cómo manejas esto?

— Verde

@Green No estoy seguro de entender, si los componentes están en páginas separadas, ¿cómo interferirían? De lo contrario, ¿por qué no agregar un nuevo elemento contenedor para cada componente, es decir:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— tolva

Este enfoque está bien desde el punto de vista del rendimiento de carga de la página, pero hay otras desventajas y, si es posible, se deben evitar múltiples raíces de React.

Las diferentes raíces de React no pueden compartir el contexto, y si necesita comunicarse entre las raíces de React, deberá recurrir a eventos DOM globales
Obtiene menos beneficios de las optimizaciones de rendimiento como la división de tiempo : suspenso y renderizado asíncrono. No es posible suspender a través de los límites de la raíz de React

Más raeding - https://github.com/facebook/react/issues/12700

— Yangshun Tay
fuente