19

¿Necesitamos saber React Avanzado?

24016Puntos

hace 5 años

¿Sabías que compilar un componente de tipo clase es más trabajo para Babel?

Realicemos un repaso, los navegadores de hoy en día no entienden código de React o Angular e incluso Vue (si lo hicieran nuestras vidas serían perfectas). Cuando construimos un proyecto con cualquiera de estas tres librerías pasan a ser compiladas por Babel para convertirse en Vanilla JavaScript. Hasta ahí vamos bien, ¿pero qué pasa cuando en React estamos escribiendo componentes de tipo clase?

Un componente de tipo clase (class MyComponent) se compila con mucho más código que un componente funcional (function MyComponent), ya que si te das cuenta un componente funcional se acerca más a lo que es JavaScript en sí y cuándo Babel lo compila es mucho menos código en nuestro .js.

¿Debo actualizar mi proyecto a functional components?

Si funciona no lo toques

Podemos aplicar esa frase o podemos optimizar nuestro código aún mucho más para que nuestro .js pese menos.

Tenemos dos ejemplos, uno con clase y otro con un componente funcional:

// Class ComponentclassExampleextendsReact.Component{
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div><p>You clicked {this.state.count} times</p><buttononClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button></div>
    );
  }
}
// Functional Componentimport React, { useState } from'react';

functionExample() {
  // Declaración de una variable del estado que llamaremos "count"const [count, setCount] = useState(0);

  return (
    <div><p>You clicked {count} times</p><buttononClick={() => setCount(count + 1)}>
        Click me
      </button></div>
  );
}

Como podemos ver podemos usar el estado incluso si nuestro componente no es de clase, gracias a la nueva actualización de React podremos hacer nuestro código muchísimo más legible y menos pesado para compilar con Babel.

Ahora un ejemplo del antiguo componentDidMount():

// Class ComponentclassExampleextendsReact.Component{
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div><p>You clicked {this.state.count} times</p><buttononClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button></div>
    );
  }
}
// Funtional Componentimport React, { useState, useEffect } from'react';

functionExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div><p>You clicked {count} times</p><buttononClick={() => setCount(count + 1)}>
        Click me
      </button></div>
  );
}

Gracias a las nuevas actualizaciones de React podemos hacer nuestro código mucho más limpio y optimizado para producción.

¿Sabías que puedes implementar un lazy loading tú mismo sin ningún otro paquete? Si quieres aprender sobre esto y más te invito a que entres ya mismo al Curso de React Avanzado y realiza las mejores prácticas de la mano de nuestro profesor Miguel Ángel Durán para realizar proyectos impresionantes sin ninguna librería y con lo mejor de JavaScript.

#NuncaParesDeAprender 🤓 💪

Daniel
Daniel
danestves

24016Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
4
29340Puntos

Entonces con los hooks podemos aligerar la app que agamos con react?

3
24016Puntos
5 años

Correcto 😄 hacemos que el código sea mucho mas ligero y optimizado.