Tipos de componentes en React

Introducción a componentes en React

En la arquitectura de React, un componente constituye la unidad fundamental. Mediante su uso se logra modularidad en la interfaz de usuario. Por lo que facilita la creación de complejas estructuras con la composición y reutilización de múltiples componentes. Dentro de estas disposiciones, pueden existir componentes que contengan a otros y así sucesivamente. Alcanzándose organizar un árbol de componentes padres e hijos y un flujo de datos en un solo sentido.

Los componentes son escritos empleando el código JSX, el que permite mezclar JavaScript, HTML y CSS. Estos contienen y manejan sus estados (states), propiedades (props) y datos internos de modo autónomo. Existen dos tipos de definiciones de componentes principales: los basados en clases de ES6 o en funciones.

Componentes basados en clases ES6

La principal manera de declarar un componente es en forma de clase de ES6 (ECMAScript+2015) mediante la extensión de la super clase React.Component, como se muestra en el ejemplo. Esto posibilita que el elemento creado soporte la herencia establecida sobre prototipos, constructores, instancias y métodos estáticos. Esta estructura les resulta más fácil y amigable a los desarrolladores que poseen cierta experiencia en la programación orientada a objetos.

import React from 'react';
import ReactDOM from 'react-dom';

class Componente extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola, {this.props.nombre}</h1>;
      </div>
    );
  }
}

En adición, es requerido definir el método render dentro de esta subclase creada. Este puede de retornar elementos de React creados con JSX como otros componentes, arreglos, fragmentos, portales, cadenas, números y booleanos.

Mediante la siguiente sintaxis se genera el componente en el DOM. En este ejemplo se le asigna un valor a la propiedad nombre. En próximas publicaciones profundizaremos en las propiedades (props) de los componentes.

ReactDOM.render(
  <Componente nombre="Juan" />, document.getElementById('root')
);

Dentro de la clase, como se comentó, es posible declarar un constructor con la siguiente sintaxis: constructor(props) {…}. Este se emplea con dos objetivos: la inicialización de estados (states) y vincular los métodos a una instancia. El constructor es llamado antes de que el componente sea montado en la vista. En el interior de este, es recomendable primeramente llamar la sentencia super(props), permitiendo utilizar en este las propiedades de la clase con el código this.props. Esto se expone en el ejemplo, donde se realizado la composición entre componentes, llamándose al componente Header dentro del método render.

import React from 'react';
import Header from './Components/Header';

class Componente extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      limite: 10
    }

    this.manejarClick = this.manejarClick.bind(this)
  }
  render() {
    return (
      <div>
        <Header nombre="Nombre de la Aplicación" />
        <h1>Hola, {this.props.name}</h1>;
      </div>
    );
  }
}

export default Componente;

En el interior de una clase se pueden declarar la lógica para los manejadores de eventos y controlar el ciclo de vida. El ciclo de vida de un componente es compuesto por los siguientes métodos: componentWillMount(), componentDidMount(), componentWillReceiveProps(nextProps), shouldComponentUpdate(nextProps, nextState), componentWillUpdate(nextProps, nextState), componentDidUpdate(prevProps, prevState) y componentWillUnmount(). En próximos artículos daremos más detalles sobre este.

Componentes basados en funciones

Otro procedimiento para definir un componente es mediante simples funciones de JavaScript. Estas pueden tener propiedades como argumentos, retornar elementos de React, pero no poseen ni estados ni ciclo de vida. Este tipo de componente tiene como propósito principal presentar los datos en la interfaz de usuario, sin realizar ninguna modificación a los mismos.

import React from 'react';

function Bienvenido(props) {
  return (
    <div>
      Hola,{props.nombre}
    </div>
  );

}

Esta declaración puede reducirse en forma de constante como se observa:

const Bienvenido = props => <div> Hola, { props.nombre} </div>;

Componentes puros

A partir de la versión 15.3 de React, aparece una nueva clase base para componentes llamada PureComponent. Los componentes puros son similares a los componentes construidos con React.Component. Su diferencia radica en que estos no implementan el método shouldComponentUpdate(). Este método es usado para saber si el componente necesita actualizar sus estados y propiedades ante la ocurrencia de un cambio. Estos componentes puros por su parte realizan una comparación superficial de las propiedades y estados, lo que redunda un mayor rendimiento. Son recomendados cuando sus características son simples y devuelven la misma salida para los mismos estados y propiedades. Es necesario, también, que el árbol de componentes que forma sea puro.

A continuación, se expone un ejemplo:

import React from 'react';

class Porcentaje extends React.PureComponent {

  render() {
    const { etiqueta, resultado = 0, total = Math.max(1, resultado) } = this.props;

    return (
      <div>
        <h6>{etiqueta}</h6>
        <span>{Math.round(resultado / total * 100)}%</span>
      </div>
    )
  }

}