Post Top Ad

Your Ad Spot

martes, 29 de septiembre de 2020

Reaccionar useState Hook

 


Ha habido un cambio de paradigma en cómo funciona React con respecto al estado, las clases y las funciones. React ahora tiene una función llamada ganchos, y parece un cambio de juego. Después de leer la documentación de React y ver React Conf, parece que los desarrolladores web deberíamos familiarizarnos con Hooks en React, ya que hacen que el código React sea más limpio. Los componentes de clase todavía son compatibles, pero parece que los Hooks en combinación con los componentes de función son el enfoque preferido en el futuro.


Presentamos useState ()

El gancho useState () es el primero en aprender y para usarlo lo importamos a un archivo como ese.

La función useState () es un gancho que le permite agregar estado a los componentes de la función en React. Antes de esto, solo los componentes de clase podían usar el estado.


Establecer una variable de estado

Podemos usar este gancho para asignar una variable de estado. Imagina que tuviéramos que crear una aplicación Todo, podríamos poner useState () para que funcione así.

Cuando llamas a useState () , devuelve dos cosas. El estado actual y una función que puede usar para actualizar ese estado . En el código anterior, se asigna una matriz de tres objetos a la todosvariable y se almacena una función que puede actualizar ese estado setTodos.

useState() Devuelve un valor con estado y una función para actualizarlo.

valores de retorno de useState

Podemos ver en la consola el resultado de cerrar la sesión todossetTodosEl primero contiene esa matriz de tres objetos, y el segundo tiene una función, como podemos ver por el carácter f.

Así que sigamos adelante y rendericemos esos tres objetos que hemos almacenado en la todosvariable. Aprendimos que al crear una lista con react podemos usar la función de mapa así.

¡Ahora tenemos tres cosas que hacer!
aprender a reaccionar ganchos


Componente de función Todo

Muevamos el marcado para representar los elementos de tareas pendientes en un componente dedicado. Cree un nuevo archivo llamado todo.jsx en src / components y agregue este código.

Ahora, en el archivo principal App.js , realice las actualizaciones resaltadas.

Ahora todavía tenemos los tres elementos de tareas pendientes representados en la página, pero estamos usando componentes de función para hacerlo.


Agregar una entrada de texto

Necesitamos más cosas que hacer. Para eso, podemos crear un nuevo componente que contendrá un formulario y un campo de entrada de texto para agregar una nueva tarea. ¡Pronto veremos cómo actualizar el estado! Agregue un nuevo archivo llamado todoform.jsx y agréguelo a src / components.

Ahora podemos importarlo y renderizarlo en el archivo principal App.js.


Llamando setTodos ()

Estamos listos para actualizar el estado de nuestra todosvariable. Podemos generar un evento en el componente <TodoForm /> y luego manejar ese evento en el componente <App />. Podemos comenzar en App.js pasando un prop como atributo en <TodoForm /> junto con la definición del controlador de eventos handleAddTodo (). Ambos se destacan aquí.

En este punto, el formulario tiene una acción onSubmit . Esto significa que cuando el usuario presione la tecla "Enter", el valor del formulario se pasará a la handleSubmitfunción. Dentro de esa función una onAddTodoestá evento levantó . Tenemos acceso a eso desde que se pasó al componente como un accesorio . Cuando se planteó este caso, la handleAddTodofunción se ejecuta en app.js . En ese momento, setTodos()se llama y se actualiza el estado.


Marcar todo como completo

Ahora agreguemos un botón al componente <Todo /> para poder marcar un elemento como completo. Hay algunos pasos para hacer esto. Primero, podemos agregar el botón al archivo del componente todo.jsx .

Arriba están los aspectos más destacados. En la línea 3, debemos aceptar el onCompleteaccesorio en el componente. En la línea diez, se pone en práctica el uso familiar de un operador ternario para decidir si se aplicará una línea al texto del elemento de tarea. Por último, puede ver el nuevo botón que, cuando se hace clic, genera ese onCompleteevento y al mismo tiempo acepta el índice como argumento. Ese índice es necesario para saber qué elemento de tareas pendientes se ha completado. Ahora necesitamos los siguientes cambios a app.js .

Hay un nuevo controlador de eventos nombrado handleComplete()en el componente. Este controlador de eventos se ejecuta cuando un usuario hace clic en el botón y genera el onCompleteevento. Una vez más, vemos que la función setTodos () se llama dentro de handleComplete()para actualizar el estado. Por último, observe que el <Todo /> incrustado tiene dos nuevos atributos de onCompleteindexEsa es la razón por la que podemos acceder a ellos en todo.jsx . Esta es una parte a veces complicada de React, y es realizar un seguimiento del intercambio de datos entre componentes. Veamos eso en acción ahora.


Marcar una tarea como inacabada

Siguiendo la convención que usamos anteriormente, ahora debería ser fácil implementar un botón que, cuando se hace clic, marca una tarea como inacabada.
todo.jsx

App.js

Ahora también podemos marcar una tarea como inacabada.


Eliminar un Todo

Para completar la aplicación, podemos agregar un botón más para permitir borrar una tarea. Una vez más, esto sigue el mismo patrón.
App.js

todo.jsx