Section 4: React State & Working Flashcards
React State & Working
Con React seguimos el Declarative Approach donde definimos el estado deseado del target y React se encarga de alcanzar ese estado.
Manejar eventos a través del STATE CONCEPT, manipular el STATE y hacer transiciones de un STATE a otro.
Event Listeners
Tenemos Event Listeners para todos los elementos HTML. En JS accedíamos a ellos a través de un selector y luego agregando un EventListener.
En React, para acceder a los Events usamos un SPECIAL PROP que siempre comienza con ON. Estos Event Handlers.reciben un función como valor.
BUENA PRÁCTICA: Puedo terminar el nombre de mis funciones con la palabra Handler para indicar que está asociada a un Evento.
JSX y Funciones
Nunca agregues muchas funciones en tu código JSX.
Las funciones en el JSX se llaman sin paréntesis porque de lo contrario las ejecutaría JavaScript.
Nota sobre Componentes
IMPORTANTE: mi componente es una función con la única diferencia de que devuelve JSX.
Actualización de Estados y Componentes
Ni el cambio de valor de las variables ni la inicialización de Event Listeners no actualizan el estado de los componentes.
Para hacer posibles esas actualizaciones de estado, necesitamos importar useStade desde la líbrería React:
useState()
La función useState (es un HOOK) nos permite definir valores como estados para que los cambios hechos sobre dichos valores sean actualizados en el componente;
Al igual que todos los React Hooks la función UseState()
1# Empieza con la palabra Use.
2# Se declara dentro del componente (los HOOKS solo deben llamarse dentro de funciones de react, no pueden llamarse fuera de los componentes ni en funciones anidadas, a excepción de UN HOOK.
useState recibe un estado como valor y con esto nos permite crear un tipo especial de variable; una variable que al cambiar de estado, hará que el component function (App.js por ejemplo), sea llamada de nuevo.
Reglas useState()
°No se define el valor de useState con el signo de = sino llamando a una función específica.
°useState() devuelve un arreglo con solo dos elementos en el que, el primer elemento es el VALOR que se le asigna en si misma y el segundo elemento es el UPDATING FUNCTION.
°Usamos Array Destructuring para poder almacenar en variables los elementos en el arreglo, devueltos por useState.
La CONVENCIÓN para nombrar las variables en el Array Destructuring de un HOOK:
°PRIMERA VARIABLE: se le asigna un nombre que describa el valor (este es el valor inicial).
°SEGUNDA VARIABLE: se le asigna un nombre que empieza por la palabra set seguida del mismo nombre que se le asignó a la primera variable (esta es la función que actualiza el valor inicial).
A Closer Look at the “useState” Hook
°useState registra un valor como estado, para el componente específico dentro del que ha sido llamado; cada vez que el component es llamado, se le delega un nuevo useState que React, maneja de forma independiente.
°Solo las instancias en las que el state cambia, son actualizadas (para cada instancia) tenemos estados separados.
°Se puede usar const con useState().
Listening to User Input
Entre las propiedades que recibo del EventListener a través del parámetro EVENT hay algunas como target:input, que apunta al evento que ha provocado la activación del EventListener y también posee VALUE PROPERTY que contiene el valor exacto del input.
const titleChangeHandler = (event) => {
console.log(event.target.value);
};
useState() e inputs
useState() me permite almacenar los valores que recibo a través de input ayudando a que no cambien cuando los componentes sean actualizados.
¿Cómo manejar múltiples estados?
Puedo tener múltiples states en un mismo componente y cada state estará separado uno del otro.
NOTA: por defecto siempre que escucho al change event para un inpunt, el valor siempre será un string, incluso si el valor es un número o una fecha.
Updating State That Depends On The Previous State
KEY RULE: Siempre que actualice un STATE que dependa del STATE anterior, debe ser a través de un Call Back Function.
Si uso este approach React garantizará que el ESTADO que reciba sea el más actualizado porque tiene en cuenta todos los scheduled state updates.
NOTA: React “agenda” los STATE UPDATES, no los ejecuta de forma automática.
Handling Form Submission
°Cuando un botón es presionado en un formulario, se genera un evento que podemos escuchar a través de un Event Listener y ese es el Summit Event, que podemos capturar con onSubmit.
°Cuando un botón es presionado en un formulario la página se actualiza porque el botón envía un request al server que está hosteando el webpage.
event.preventDefault();
Adding Two-Way Binding
Two-way Binding es muy útil para trabajar con forms porque me permite recolectar user inputs y también cambiarlo. Por ejemplo al momento de un form submission
Two-way Binding significa que para los inputs podemos escuchar pero también podemos poner un nuevo VALOR de vuelta o resetearlo con el atributo value en el elemento input.
Child-to-Parent Component Communication (Bottom-up)
°Podemos crear nuestros propios EVENT PROPS que reciban funciones como valores y eso nos permite PASAR una función desde un PARENT-COMPONENT hacia un CHILD-COMPONENT y entonces llamar esa función dentro del CHILD-COMPONENT, para pasarle DATA como parámetro; así nos comunicamos “from child to parent”.
°Las PROPS solo pueden pasarse de parents a childs; no podemos saltar componentes intermedios.
Lifting The State Up
Lifting-The-State-Up es un CONCEPTO que trata sobre pasar la data generada desde un Child-Component a algún Parent-Component para usarla en él o para pasarla a otro child-component.
Nota: generalmente el objetivo de hacer un Lifting The State Up no es pasar la data al App Component (Root Component), sino pasarla tan arriba en el Component Trees comosea necesario hasta tener un componente que tiene acceso tanto al componente que genera data como a los componentes que necesitan la data.
CONTROLLED VS UNCONTROLLED
Siempre que uso Two Way Binding estoy controlando un componente; significa que un valor que es usado en el componente es pasado como prop a un parent component y es recibido desde el parent component, pero la verdadera lógica reside en el parent component.
Resumido: tanto el valor como los cambios al valor no son manejados en el componente perse, sino en un parent component..
Presentational/stateless/dumb componentes vs stateful/smart components
Presentational versus stateful components
Stateless versus stateful componentes
Dumb versus smart components
Son sinónimos empleados para referirse a los componentes que manejan estados versus los que no manejan estados; en la mayoría de React Apps voy a tener más presentational/dumb components que stateful/smart components.
