Mientras estudiaba los ganchos de reacción, vi un ejemplo de la función useState que estaba hecha de vainilla javascript.
function useState(initVal) { let _val = initVal const state = _val const setState = newVal => { _val = newVal } return [state, setState] } const [count, setCount] = useState(1) console.log(count) // 1 setCount(2) console.log(count) // 1Aunque declaré el estado como variable, cuando la función setState llama con newValue, el conteo no cambia.
Sin embargo, cuando el estado cambia la variable para funcionar como a continuación,
function useState(initVal) { let _val = initVal const state = () => _val const setState = newVal => { _val = newVal } return [state, setState] } const [count, setCount] = useState(1) console.log(count()) // 1 setCount(2) console.log(count()) // 2el conteo comienza a cambiar.
¿Está sucediendo esto porque cada vez que llama a la función de conteo, hace referencia al valor cambiado de _val por la función setState usando el cierre? y ¿Cómo puedo explicar cómo funcionan los ganchos de reacción usando el cierre en javascript?
Cuando desestructura , obtiene variables nuevas y distintas con copias de los datos.
// simple explanation const list = ['dog']; const [animal] = list; console.info(animal); // dog // change the original list[0] = 'cat'; // output console.info(list[0], animal); // cat, dog Incluso si refactoriza como se muestra a continuación para usar let y actualizar correctamente, no obtendrá el valor original ya que no hay ninguna referencia a él.
function useState(initVal) { let state = initVal const setState = newVal => { state = newVal; } return [state, setState]; } const [count, setCount] = useState(1); console.log(count); // 1 setCount(2); console.log(count); // 1 // simple explanation const list = ['dog']; const [animal] = list; console.info(animal);; list[0] = 'cat'; console.info(list[0], animal);Aunque declaré el estado como variable
En realidad, no lo hiciste. Lo declaraste como una const.
El primero devuelve el valor de una variable. Llano y simple. Sucede que es 1 . El valor se copia, no se puede cambiar. (Obviamente, puede cambiar el número establecido, pero no puede cambiar 1 ).
El segundo devuelve una función. Esa función forma un cierre sobre _val . _val no se evalúa hasta que se llama a count() . Cada vez que se llama, obtiene el valor de _val y lo devuelve.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Porque lo estás reenlazando en esta línea.
const state = _valEl estado se convierte en una constante congelada con valor inicial
return [_val, setState]Cámbialo a esto y obtendrás lo que esperabas.