La creación de estados globalmente puede ralentizar el rendimiento de su aplicación. Aprenda cómo puede crear y utilizar estados de manera efectiva en su aplicación React.
Si ha escrito mucho código React, es probable que haya usado el estado incorrectamente. Un error común que cometen muchos desarrolladores de React es almacenar estados globalmente en la aplicación, en lugar de almacenarlos en los componentes donde se usan.
Aprenda cómo puede refactorizar su código para utilizar el estado local y por qué hacerlo siempre es una buena idea.
Ejemplo básico de estado en React
Aquí hay un muy aplicación de contador simple que ejemplifica cómo se maneja típicamente el estado en React:
importar {usarEstado} de'reaccionar'
importar {Encimera} de'encimera'funciónaplicación(){
constante [contar, establecerCuenta] = usarEstado(0)
devolver<Encimeracontar={contar}establecerCuenta={setCount} />
}
exportarpor defecto aplicación
En las líneas 1 y 2, importa el usarEstado() gancho para crear el estado, y el Encimera
componente. Tú defines el contar estado y establecerCuenta método para actualizar el estado. Luego pasas ambos al Encimera componente.El Encimera componente luego representa el contar y llamadas establecerCuenta para incrementar y decrementar el conteo.
funciónEncimera({contar, establecerCuenta}) {
devolver (
No definiste el contar variables y establecerCuenta funcionar localmente dentro del Encimera componente. Más bien, lo pasó desde el componente principal (aplicación). En otras palabras, estás usando un estado global.
El problema con los estados globales
El problema con el uso de un estado global es que está almacenando el estado en un componente principal (o principal de un principal) y luego pasándolo como accesorios al componente donde ese estado es realmente necesario.
A veces, esto está bien cuando tiene un estado que se comparte entre muchos componentes. Pero en este caso, ningún otro componente se preocupa por el contar estado a excepción del Encimera componente. Por lo tanto, es mejor mover el estado a la Encimera componente donde realmente se utiliza.
Mover el estado al componente secundario
Cuando mueves el estado a la Encimera componente, se vería así:
importar {usarEstado} de'reaccionar'
funciónEncimera() {
constante [contar, establecerCuenta] = usarEstado(0)
devolver (
Entonces dentro de tu aplicación componente, no tiene que pasar nada al Encimera componente:
// importaciones
funciónaplicación(){
devolver<Encimera />
}
El contador funcionará exactamente igual que antes, pero la gran diferencia es que todos sus estados están localmente dentro de este Encimera componente. Entonces, si necesita tener otro contador en la página de inicio, entonces tendría dos contadores independientes. Cada contador es autónomo y se ocupa de todo su propio estado.
Manejo del estado en aplicaciones más complejas
Otra situación en la que usaría un estado global es con formularios. El aplicación El siguiente componente pasa los datos del formulario (correo electrónico y contraseña) y el método de establecimiento al Formulario de inicio de sesión componente.
importar { estado de uso } de"reaccionar";
importar { Formulario de inicio de sesión } de"./Formulario de inicio de sesión";funciónaplicación() {
constante [formData, setFormData] = useState({
correo electrónico: "",
contraseña: "",
});funciónactualizarFormData(nuevos datos) {
setFormData((anterior) => {
devolver { ...anterior, ...datosnuevos };
});
}funciónenEnviar() {
consola.log (datosformulario);
}
devolver (
datos={formData}
updateData={actualizarFormData}
onSubmit={onSubmit}
/>
);
}
El Formulario de inicio de sesión El componente toma la información de inicio de sesión y la procesa. Cuando envía el formulario, llama al actualizar datos función que también se transmite desde el componente principal.
funciónFormulario de inicio de sesión({ onSubmit, data, updateData }) {
funciónmanejarEnviar(mi) {
e.preventDefault();
onSubmit();
}
devolver (
En lugar de administrar el estado en el componente principal, es mejor mover el estado a LoginForm.js, que es donde usarás el código. Al hacerlo, cada componente es independiente y no depende de otro componente (es decir, el principal) para obtener datos. Aquí está la versión modificada de la Formulario de inicio de sesión:
importar { usarRef } de"reaccionar";funciónFormulario de inicio de sesión({ onSubmit }) {
constante emailRef = useRef();
constante contraseñaRef = useRef();
funciónmanejarEnviar(mi) {
e.preventDefault();
onSubmit({
correo electrónico: emailRef.current.value,
contraseña: contraseñaRef.valor.actual,
});
}
devolver (
Aquí vinculas la entrada a una variable usando árbitro atributos y el useRef Gancho de reacción, en lugar de pasar los métodos de actualización directamente. Esto le ayuda a eliminar el código detallado y optimice el rendimiento del formulario usando el gancho useRef.
En el componente principal (Aplicación.js), puede eliminar tanto el estado global como actualizarFormData() método porque ya no lo necesita. La única función que queda es onSubmit(), que invocas desde dentro del Formulario de inicio de sesión componente para registrar los detalles de inicio de sesión en la consola.
funciónaplicación() {
funciónenEnviar(formularioDatos) {
consola.log (datosformulario);
}
devolver (
datos={formData}
updateData={actualizarFormData}
onSubmit={onSubmit}
/>
);
}
No solo hizo que su estado fuera lo más local posible, sino que en realidad eliminó la necesidad de cualquier estado (y usó árbitros en cambio). Entonces tus aplicación componente se ha vuelto significativamente más simple (tiene solo una función).
Su Formulario de inicio de sesión El componente también se volvió más simple porque no necesitaba preocuparse por actualizar el estado. Más bien, solo haces un seguimiento de dos árbitros, y eso es.
Manejo de estado compartido
Hay un problema con el enfoque de tratar de hacer que el estado sea lo más local posible. A menudo se encontraría con escenarios en los que el componente principal no usa el estado, pero lo pasa a varios componentes.
Un ejemplo es tener un TodoContenedor componente principal con dos componentes secundarios: Lista de quehaceres y TodoCuenta.
funciónTodoContenedor() {
constante [todos, establecerTodos] = usarEstado([])
devolver (
<>
</>
)
}
Ambos componentes secundarios requieren la todos estado, entonces TodoContenedor se lo pasa a los dos. En escenarios como estos, debe hacer que el estado sea lo más local posible. En el ejemplo anterior, colocándolo dentro del TodosContainer es lo más local posible.
Si pusieras este estado en tu aplicación componente, no sería lo más local posible porque no es el padre más cercano a los dos componentes que necesitan los datos.
Para aplicaciones grandes, administrar el estado solo con el usarEstado() gancho puede resultar difícil. En tales casos, es posible que deba optar por el API de contexto de reacción o reaccionar redux para administrar eficazmente el estado.
Obtenga más información sobre los ganchos de reacción
Los ganchos forman la base de React. Al usar ganchos en React, puede evitar escribir código largo que de otro modo usaría clases. El gancho useState() es indiscutiblemente el gancho React más utilizado, pero hay muchos otros como useEffect(), useRef() y useContext().
Si está buscando volverse competente en el desarrollo de aplicaciones con React, entonces necesita saber cómo usar estos ganchos en su aplicación.