Tipos de Componentes en ReactJS

El concepto de componente es algo bastante sencillo de entender, básicamente se trata de un elemento software visual que tiene su propio estado, recibe unas propiedades e implementa su propia lógica de renderizado. Pero… ¿todos los componentes son iguales? ¿Podemos jerarquizarlos o diferenciar en tipos de componentes?

Este articulo trata de ser un recorrido por los tipos de componentes que podemos usar en React. Vamos a diferenciar los tipos en dos categorizaciones, la categorización por comportamiento y la categorización estructural.

Tipos de Componentes de Comportamiento

Stateful Component

class MiBoton extends React.Component {    constructor(props) {         super(props);
this.state.style = { background: 'blue', color: 'white' };
} render () { return ( <button {...this.props} style={this.state.styles} />
);
}
}

Componentes Stateless

Aquí os dejo un ejemplo de componente stateless:

const MiBoton = props => {
const styles = { background: 'blue', color: 'white' }

return (
<button
{...props}
style={styles}
/>
)
}

Acerca de este tipo de componentes os aconsejo la lectura de este artículo donde se destacan todas las características y ventajas que poseen los Stateless Components:

Pure Component

La implementación es idéntica que el Statefull, únicamente que nos contienen estado y extienden de React.PureComponent.

class MiBoton extends React.PureComponent {

const styles = { background: 'blue', color: 'white' }

render () {
return (
<button {...this.props} style={styles} />
);
}
}

Componentes de Órden Superior u HOC.

Los Componentes de Orden Superior (HOC) son funciones que toman como parámetro otro componente, extendiendo su funcionalidad y devolviendo un nuevo componente con funcionalidad extendida. Si las propiedades del HOC cambian, este se renderizará de nuevo y actualizará el componente envuelto en él.

Este tipo de componentes se usan para implementar funcionalidades comunes como pueden ser la paginación, interceptar y modificar la renderización, hacer llamadas a apis y alimentar el componente envuelto, control sobre los inputs de formularios…

Este tipo de componentes se usa en librerías muy utilizadas en el ecosistema React como son react-redux y react-redux-form. Básicament es un buen método para desacoplar funcionalidad, extender la funcionalidad de nuestros componentes y reutilizar el código en toda en nuestra aplicación

Vamos a ver un ejemplo extraído de Intenet en el que se realiza un HOC TruncateHOC que es responsable de truncar la propiedad text de un componentes y truncarla a 25 caracteres como máximo.

const TruncateHOC = WrappedComponent =>
class extends React.Component {
static propTypes = {
text: React.PropTypes.string.isRequired
};

truncateText(text) {
const maxLength = 25;

if (text.length > maxLength) {
return `${ text.substring(0, maxLength - 3) }...`;
} else {
return text;
}
}

// Renderizamos el componente
render() {
// Creamos una copia de los props actuales
let props = Object.assign({}, this.props);
// Modificamos el texto
props.text = this.truncateText(props.text);

// Renderizamos el componente principal
return <WrappedComponent { ...props } />;
}
};

Una vez se ha definido el HOC, se puede empezar a utilizar en todos los componentes que necesitemos. En este caso deben de cumplir con la interfaz especificada en el HOC y es que deben de tener una prop text.

let Description = props => <p>{ props.text }</p>

class Article extends React.Component {
render() {
return <article>{ this.props.text }</article>
}
}

// Se aplica el HOC!
Description = TruncateHOC(Description);
Article = TruncateHOC(Article);

Existen varios artículos que hablan en profundidad de este tipo de componentes, ya que son los que requieren mayor complejidad y atención a la hora de implementarlos. Os dejo un listado de URLs donde se detalla el porqué de este tipo de componentes, y ejemplos de uso:

Tipos de Componentes estructurales

Componentes Visuales

Ejemplo:

class Item extends React.Component {
render () {
return (
<li><a href='#'>{ this.props.valor }</a></li>
);
}
}

Componentes Contenedor

Ejemplo:

class ItemsContainer extends React.Component {
constructor (props) {
super(props);
this.state = {
temas: ['Vue', 'React JS', 'Angular']
};
}

render () {
const items = this.state.temas.map(t => (
<Item valor={ t } />
));
return (
<div>
<ul>{ items }</ul>
</div>
);
}
}

Generalmente, los componentes contenedor representan cada una de las páginas y coincide con una de las rutas definidas. Recomendable la lectura de Enrique Munguia.

Conclusión

Full Stack Web Developer — adrianalonso.es

Full Stack Web Developer — adrianalonso.es