Tipos de componentes en React

Tipos de componentes en React

Tipos de componentes en React

Hola a todos, nuestro equipo de DevSun Europe contin煤a con la serie de art铆culos relacionados con React. En la publicaci贸n que hoy nos ocupa, presentamos los diferentes tipos de componentes en React apoyados en las configuraciones en que se definen. Es decir, si se declaran en forma de clases o funciones. Abarcamos, adem谩s, una nueva clase base para construir un componente llamada Componente Puro.

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.

tipos-componentes-react-imgen
Foto de Dribble por: William Kesling

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>
    )
  }

}

Con este art铆culo hemos expuesto los diferentes procederes para la declaraci贸n de componentes en React. En pr贸ximos art铆culos nuestro equipo de DevSun Europe seguir谩 profundizando en React, importante biblioteca de JavaScript.


Total de Vistas: 1.305
Like
Like Love Haha Wow Sad Angry
1411

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up