¿Por qué ReactJS necesita separar los componentes del contenedor y los componentes de visualización?
Entonces, ¿por qué necesitamos separar el componente contenedor del componente de visualización?
Aquí hay un principio básico: el componente contenedor solo extrae datos y luego representa el subcomponente correspondiente. Recuerde esto, ¡créame!
Mire el ejemplo de la lista de visualización a continuación, que no distingue entre contenedores y componentes de visualización.
//lista de comentarios. La lista de comentarios de jsclass extiende React. componente{? Constructor(){ super(); this.state = { comentarios: [] }
}
componentidmount(){
$.ajax({ ? url: "/mis-comentarios.json", tipo de datos: 'json',? éxito: función(comentarios){ this . setstate({ comentarios: comentarios });
});
}
render(){ return lt;ul gt{ este estado . ul gt;;
}
renderComment({cuerpo, autor }){ return lt;李gt{ cuerpo }—{ autor } lt;/李gt;
}
}
Disponibilidad: CommentList no se puede reutilizar.
Estructuras de datos: Los componentes deben esperar los datos que necesitan, pero aquí no hay ninguno. Los PropTypes hacen esto muy bien.
Veamos la separación:
//CommentListContainer. jsclass CommentListContainer extiende React. componente {
Constructor(){ super(); this.state = { comentarios: [] }
}
componentidmount(){
$.ajax({
? URL: "/mis-comentarios.json",
? Tipo de datos: 'json',
? éxito: función(comentarios){ this . setstate({ comentarios: comentarios });
}.binding(this)
}); /p>
render(){ return lt; lista de comentarios comentarios = { este estado .comentarios }/ gt;; La lista de comentarios amplía React.
componente {
constructor(prop){super(prop);
}
render() {
return ltul gt{ esto . props . comentarios . map(renderizar comentario)} lt;/ul gt;;
}
renderComment({cuerpo, autor}){ return lt;李gt{ cuerpo } —{ Author } lt;/李gt;
}
}
De esta manera, la extracción y la representación de datos están separadas, CommentList se puede reutilizar y CommentList se puede configurar PropTypes para determinar la disponibilidad de datos.
Veamos la diferencia entre componentes de contenedor y componentes de exhibición:
Componentes de exhibición
Ensamblaje del contenedor
Preste atención a la presentación de cosas y la forma en que funcionan.
Puede contener componentes de presentación y contenedor, generalmente con etiquetas DOM y estilos CSS. Puede contener componentes de presentación y contenedor, pero no tendrá etiquetas DOM ni estilos CSS.
A menudo se permite proporcionar datos y comportamiento a los componentes del contenedor o mostrar componentes a través de este pase.props.children.
No depende de terceros, como store o flux action, para llamar a flux action y proporcionar sus devoluciones de llamada a los componentes de presentación.
No especifique cómo se cargan y modifican los datos como fuente de datos. Por lo general, utilice componentes de nivel superior en lugar de escribir los suyos propios, como connect() de React Redux, create container() de Relay y Container.create() de Fluxutils.
Obtén datos y devoluciones de llamadas solo a través de propiedades.
Rara vez tiene su propio estado. Incluso si lo tiene, es su propio estado de interfaz de usuario.
A menos que requieran su propio estado, ciclo de vida u optimización del rendimiento, se escribirán como componentes funcionales.
Ventajas:
Mejor separación de presentación y contenedores. mejor comprensión de las aplicaciones y la interfaz de usuario.
Los componentes de presentación altamente reutilizables se pueden utilizar con muchas fuentes de datos de estado diferentes.
El componente de visualización es tu paleta. Puede colocarlos en páginas separadas y permitir que los diseñadores ajusten la interfaz de usuario sin afectar la aplicación.
Obligando a separar etiquetas para mayor usabilidad.