Soy nuevo en React y trato de entender los ganchos, especialmente cuando se usan dentro del componente de función.
Aquí hay un ejemplo donde se usa el gancho useState :
import React, { useState } from "react"; const StateTutorial = () => { const [inputValue, setInputValue] = useState("Pedro"); let onChange = (event) => { const newValue = event.target.value; setInputValue(newValue); }; return ( <div> <input placeholder="enter something..." onChange={onChange} /> {inputValue} </div> ); }; export default StateTutorial;esto esta tomado de aqui
Entiendo cómo usarlo. Entiendo que en cada llamada de setInputValue , el estado se actualiza, la vista se vuelve a representar y vemos el nuevo valor de inputValue .
Supongo que volver a renderizar implicaría volver a llamar a la función StateTutorial .
Entonces, mi pregunta es, si se llama a StateTutorial al volver a renderizar, ¿cómo es que el valor de inputValue no se restablece al valor inicial? ¿Cómo funcionan los componentes funcionales y los ganchos de reacción? ¿Cómo es posible que el estado que useState está rastreando no se restablezca al valor inicial al volver a renderizar, porque mirar el código es lo que esperaría?
Para hacerlo un poco corto:
Probablemente estés familiarizado con el concepto del DOM virtual. De lo contrario, imagine que reaccionar mantiene una representación del DOM real del navegador, representado como objetos JavaScript en la memoria. Luego, el DOM virtual se usa para varias optimizaciones.
En el caso de los ganchos, el valor del gancho se adjunta al nodo virtual del componente. Dado que el objeto de nodo virtual real para su componente permanece igual al volver a renderizar su StateTutorial , el valor real del enlace también se mantiene.
Personalmente, descubrí que el Tutorial Build your own React es una forma excelente y muy accesible de comprender mejor estos conceptos.