Components&Lifecycle [EN][ES}

Here all related information about Components, their composition, function, how they work, and when to use each one. Also, their props and their meaning. To know more about components, here

Components

A component is an independent element, like a whole block that represents our navigation bar or a whole page, obviously, the dimensions can be different. Also, its functionality and composition can differ, for example, we can find components made out of components or components container, representative, or a small decorator.

• Class Components: This is normally class and contains complex and logical structures behind it, it is characteristic of the presence of a State that will modify the props of the container.

• Functional Components: We may use these ones when no data or interaction is made from other components. They are easy to code as simple as writing a return with the JSX.

• Higher-order Components: This will take as input a component and will return the component as output with added functionalities.

• Dumb Components: These are functional components without the state, so they are light and normally fast to render.

• Smart Component: This is class state full components, it contains a logic behind. It means it will make use of many methods probably.

• Presentational Components: functional component, normally used as input by Higher-Order Components. Its goal is to give style.

• Container Component: this class component will provide the data to sub-components so normally it will make fetching tasks.

Life Cycle

A component is alive it means it has a beginning (Mount), it can grow (Update) and it can end (Unmount). Inside each step is notable the presence of certain methods from React. I will show you which those are, how they work, and when we may need them.

MOUNTING: It can start with a constructor() if the component is considered smart, but obligatory is the render() method, in function cases it is return(). This process ends with the componentDidMount() function.

• Constructor(): It is needed to implement when the component has to handle events or states. It receives props as arguments but before using them, you must call inside super(props), why? Well because it calls the constructor of the parent class, which is the Component. Purpose? Basically, binding handlers functions and initializing state objects but never setState, never.
  Now, you don’t want to linked props with states, because then you are limiting the update feature of those properties, so leave that to the final method. Unless you want derived states
• render(): Takes State and Props and renders a JSX element, array, or list of elements, strings, numbers, booleans, or Portals. This method can’t miss because is the main reason for the existence of an element. It only renders, that’s its only task.
• ComponentDidMount(): Here you want to make API petitions or setState actions. How does it work? After the render of the DOM, all is settle and now that is mounted we can make those requests, normally asynchronous actions that will trigger the next process.

UPDATING: It is triggered if ComponentDidMount indicates it. This process is a big opportunity to compare actual props with past ones.

• ComponentDidUpdate: you should immediately call setState to avoid an infinite loop that can damage the performance of the component. Remember not using props in the state’s component. That’s a bad practice because it causes bugs.

UNMOUNTING: This is the perfect time to cancel any external request or timer actions we settled previously because even tho the component will stop existing the call won’t do. So try to not forget.

• ComponentWillUnmount: if you made a request to an API or set a Timer function, it is time to cancel it. Do not call setState, because there won’t be the next render method after this one.

• Aquí toda la información relacionada con los Componentes, su composición, función, cómo funcionan y cuándo utilizar cada uno. Además, sus accesorios y su significado. Para saber más sobre los componentes, [aquí] (https://reactjs.org/docs/react-component.html#constructor) *

Componentes

Un componente es un elemento independiente, como un bloque completo que representa nuestra barra de navegación o una página completa, obviamente, las dimensiones pueden ser diferentes. Además, su funcionalidad y composición pueden diferir, por ejemplo, podemos encontrar componentes hechos a partir de componentes o componentes contenedor, representativos, o un pequeño decorador.

• ** Class Components: ** Esto normalmente es de clase y contiene estructuras complejas y lógicas detrás de ella, es característico de la presencia de un Estado que modificará los pilares del contenedor.

• ** Componentes funcionales: ** Podemos utilizar estos cuando no se realizan datos o interacción de otros componentes. Son fáciles de codificar, tan simples como escribir una devolución con JSX.

• ** Componentes de orden superior: ** Esto tomará como entrada un componente y devolverá el componente como salida con funcionalidades añadidas.

• ** Componentes tontos: ** Estos son componentes funcionales sin el estado, por lo que son ligeros y normalmente rápidos de renderizar.

• ** Componente inteligente: ** Este es un estado de clase de componentes completos, contiene una lógica detrás. Significa que probablemente hará uso de muchos métodos.

• ** Componentes de presentación: ** componente funcional, normalmente utilizado como entrada por componentes de orden superior. Su objetivo es dar estilo.

• ** Componente contenedor: ** este componente de clase proporcionará los datos a los subcomponentes, por lo que normalmente realizará tareas de búsqueda.

Ciclo vital

Un componente está vivo, significa que tiene un comienzo (Montar), puede crecer (Actualizar) y puede terminar (Desmontar). Dentro de cada paso se destaca la presencia de ciertos métodos de React. Le mostraré cuáles son, cómo funcionan y cuándo podemos necesitarlos.

** MONTAJE: ** Puede comenzar con un ** constructor () ** si el componente se considera inteligente, pero obligatorio es el método ** render () **, en casos de función es ** return () ** . Este proceso termina con la función ** componentDidMount () **.

• ** Constructor (): ** Se necesita implementar cuando el componente tiene que manejar eventos o estados. Recibe ** props ** como argumentos, pero antes de usarlos, debes llamar dentro de ** super (props), ** ¿por qué? Bueno, porque llama al constructor de la clase padre, que es Component. ¿Propósito? Básicamente, enlazar funciones de ** manejadores ** e inicializar objetos de ** estado ** pero nunca ** setState, ** nunca.
  Ahora, no desea vincular props con estados, porque entonces está limitando la función de actualización de esas propiedades, así que déjelo al método final. A menos que desee [estados derivados] (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)
• ** render (): ** Toma State and Props y renderiza un elemento JSX, matriz o lista de elementos, cadenas, números, booleanos o portales. Este método no puede faltar porque es la razón principal de la existencia de un elemento. Solo renderiza, esa es su única tarea.
• ** ComponentDidMount (): ** Aquí desea realizar peticiones API o acciones setState. ¿Como funciona? Después del render del DOM, todo está arreglado y ahora que está montado podemos hacer esas solicitudes, normalmente acciones asíncronas que desencadenarán el siguiente proceso.

** ACTUALIZACIÓN: ** Se activa si ComponentDidMount lo indica. Este proceso es una gran oportunidad para comparar los accesorios reales con los anteriores.

• ComponentDidUpdate: debe llamar inmediatamente a setState para evitar un bucle infinito que pueda dañar el rendimiento del componente. Recuerde no usar accesorios en el componente estatal. Esa es una mala práctica porque causa errores.

** DESMONTAJE: ** Este es el momento perfecto para cancelar cualquier solicitud externa o acciones de temporizador que establezcamos anteriormente porque incluso aunque el componente deje de existir, la llamada no funcionará. Así que trata de no olvidar.

• ** ComponentWillUnmount: ** si realizó una solicitud a una API o configuró una función de temporizador, es hora de cancelarla. No llame a setState, porque no habrá el siguiente método de renderizado después de este.