useState()
es un ejemplo de gancho de React incorporado que le permite usar estados en sus componentes funcionales. Esto no era posible antes de React 16.7 .
En el tutorial anterior aprendimos sobre React Hooks y qué problemas resuelven . Veamos ahora con un ejemplo cómo usar el useState()
gancho incorporado para permitir que las funciones de los componentes tengan un estado local.
En el tutorial anterior, clonamos nuestro proyecto React / Axios / Django e instalamos las dependencias del proyecto, incluido React 16.7 alpha, que brinda soporte para React Hooks.
Nuestra aplicación front-end tiene dos componentes React:
CustomerCreateUpdate
: para crear y actualizar clientes,CustomersList
: para listar clientes
Las solicitudes de API enviadas con Axios se encapsulan en la CustomersService.js
clase.
Los dos componentes utilizan clases de componentes.
Antes de sumergirnos en la práctica, veamos algo de teoría sobre el useState()
anzuelo.
¿Por qué usar useState
?
Antes de React 16.7, si está utilizando componentes funcionales en su aplicación, de repente tiene el requisito de agregar un montón de estados a su función; solo tiene una solución que es convertir su función en una clase que se extiende, React.Component
luego usará this.state
para agregar el estado inicial y setState()
actualizarlo.
Ahora, con la última versión de React, aún puede usar componentes funcionales y aprovechar todas las funciones, como los métodos de estado y ciclo de vida mediante ganchos.
En este tutorial, buscaremos principalmente en el useState()
gancho.
Tenga en cuenta que los Hooks se encuentran actualmente en versión alfa , por lo que aún no están listos para la producción. Esto también significa que la API puede cambiar.
¿Qué hace useState
exactamente?
La useState
función es un gancho integrado que se puede importar desde el react
paquete. Le permite agregar estado a sus componentes funcionales. Usando el useState
gancho dentro de un componente de función, puede crear un fragmento de estado sin cambiar a componentes de clase.
Existen algunas diferencias entre el estado de manejo en funciones y clases:
- En los componentes de la clase, el estado es un objeto al que se accede mediante
this.state
; Simplemente agrega propiedades en este objeto para agregar un estado inicial y luego usasetState()
para cambiarlo más tarde. - En componentes de función y uso
useState
; el estado no es necesariamente un objeto. Puede ser una matriz, un número, un booleano o una cadena, etc. Puede realizar varias llamadas auseState
para crear una sola pieza de estado con un valor inicial, pero también la función que se usa para cambiar ese estado más adelante.
Entender useState
con el ejemplo
Ahora, veamos un ejemplo de cómo useState
crear un componente de función con estado.
Este es un ejemplo truncado del CustomerCreateUpdate
componente:
import React, { Component } from 'react';
import CustomersService from './CustomersService';
const customersService = new CustomersService();
class CustomerCreateUpdate extends Component {
constructor(props) {
super(props);
}
componentDidMount(){}
handleCreate(){
customersService.createCustomer(
{
"first_name": this.refs.firstName.value,
"last_name": this.refs.lastName.value,
"email": this.refs.email.value,
"phone": this.refs.phone.value,
"address": this.refs.address.value,
"description": this.refs.description.value
}
)
}
handleUpdate(pk){}
handleSubmit(event) {}
render() {}
}
export default CustomerCreateUpdate;
Este componente se extiende React.Component
. Esto permite que el componente utilice el componentDidMount
evento del ciclo de vida y this.refs
acceda a los campos del formulario. Veremos en la siguiente parte, cómo acceder a estas características desde un componente de función usando ganchos como useEffect()
y useRef()
.
Este es un ejemplo truncado del CustomersList
componente que está disponible en este archivo:
import React, { Component } from 'react';
import CustomersService from './CustomersService';
const customersService = new CustomersService();
class CustomersList extends Component {
constructor(props) {
super(props);
this.state = {
customers: [],
nextPageURL: ''
};
/*...*/
}
componentDidMount() {
var self = this;
customersService.getCustomers().then(function (result){
self.setState({ customers: result.data, nextPageURL: result.nextlink})
});
}
handleDelete(e,pk){
}
nextPage(){
}
render() {
return (
<div className="customers--list">
<table className="table">
<-- Truncated -->
<tbody>
{this.state.customers.map( c =>
<tr key={c.pk}>
<!-- Truncated -->
</tr>)}
</tbody>
</table>
</div>
);
}
}
export default CustomersList;
Este componente extiende React.Component
y usa el this.state
objeto para mantener el estado que contiene la matriz de clientes y la nextPageURL
cadena que almacena el enlace a la siguiente página de datos para obtener de la API de Django. También usamos el setState()
método para actualizar el estado una vez que obtenemos datos del servidor usando el customersService.getCustomers()
método.
En el render()
método recorremos la this.state.customers
matriz y mostramos las filas de nuestra tabla.
Ahora queremos convertir este componente de clase en un componente de función y poder mantener el estado de nuestra función como en el ejemplo de arriba.
import React, { useState } from 'react';
import CustomersService from './CustomersService';
const customersService = new CustomersService();
function CustomersList(props){
const [customers, setCustomers] = useState([]);
const [nextPageURL, setNextPageURL] = useState('');
function handleDelete(e, pk){}
function nextPage(){}
return (
<div className="customers--list">
<table className="table">
<thead key="thead">
<tr>
<!-- Truncated -->
</tr>
</thead>
<tbody>
{customers.map( c =>
<tr key={c.pk}>
<!-- Truncated -->
</tr>)}
</tbody>
</table>
<button className="btn btn-primary" onClick= { nextPage }>Next</button>
</div>
);
}
El useState
gancho devuelve una matriz con 2 elementos. Usamos el uso de desestructuración de matrices para asignar nombres a los dos elementos. El primer elemento es el valor inicial del estado y el segundo elemento es una función para establecer el estado; que puede llamar con un nuevo valor para establecer el estado relacionado.
A continuación, en el componentDidMount
método de ciclo de vida que se activa cuando el componente está montado en el DOM, enviamos una solicitud al servidor, nos suscribimos al Observable y luego llamamos al setState
método
this.setState({ customers: result.data, nextPageURL: result.nextlink})
Podemos lograr este mismo comportamiento usando el useEffect()
gancho setCustomers()
y las setNextPageURL()
funciones que obtenemos del useState()
gancho.
useEffect()
es un gancho de React incorporado que se usa para ejecutar efectos secundarios y es equivalente a tres métodos de ciclo de vida componentDidMount
, componentDidUpdate
y componentWillUnmount
. Veremos más sobre este gancho en un tutorial separado.
Justo debajo del useState()
gancho en la función de su componente, agregue el siguiente código:
useEffect(() => {
customersService.getCustomers().then(function (result) {
setCustomers(result.data);
setNextPageURL(result.nextlink);
});
});
Finalmente, simplemente agregue las implementaciones para handleDelete()
y nextPage()
en su CustomersList
componente de función:
function handleDelete(e, pk){
customersService.deleteCustomer({pk : pk}).then(()=>{
var newArr = customers.filter(function(obj) {
return obj.pk !== pk;
});
setCustomers(newArr);
});
}
function nextPage(){
customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
setCustomers(result.data);
setNextPageURL(result.nextlink);
});
}
Nuevamente, simplemente usamos las funciones setCustomers()
y setNextPageURL()
devueltas al desestructurar la matriz devuelta por el useState()
gancho.
Conclusión
En este tutorial, hemos visto por ejemplo cómo usar useState
hook para crear estados dentro de componentes funcionales en React.
En el siguiente tutorial, veremos otro gancho incorporado importante useEffect
que puede usarse para ejecutar efectos secundarios en los componentes de su función.
0 Comentarios
Dejanos tu comentario para seguir mejorando!