Intenté aprender React Hooks y soy nuevo en la codificación en general y noté que prevCount no se declara de antemano. ¿Cuál es el valor de prevCount y por qué no tiene que declararlo de antemano como const prevCount? No entiendo de dónde vino esto, ¿es solo una variable que declaras en setCount o useState que accede al valor predeterminado (en este caso, initialCount) de count?
const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); }Referencia: https://reactjs.org/docs/hooks-reference.html
prevCount se refiere al valor de count en el momento de la evaluación. En la práctica, echemos un vistazo a una modificación de su ejemplo:
function TestCompononent() { const initialCount = 0; const [count, setCount] = useState(initialCount); function handleChange1() { setCount(count + 1) } function handleChange2() { setCount(prevCount => prevCount + 1) } function handleChange3() { setCount(count + 1) setCount(count + 1) } function handleChange4() { setCount(prevCount => prevCount + 1) setCount(prevCount => prevCount + 1) } return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={handleChange1}>handleChange1</button> <button onClick={handleChange2}>handleChange2</button> <button onClick={handleChange3}>handleChange3</button> <button onClick={handleChange4}>handleChange4</button> </> ); } Ok, ahora en este ejemplo, handleChange1 y handleChange2 se comportarán de manera idéntica, PERO handleChange3 y handleChange4 no lo harán.
Imaginemos que cuando llamamos a handleChange3 no hemos hecho nada más, entonces count es igual a 0 .
Cuando llamamos a handleChange3 estamos haciendo
setCout(count + 1) // count === 0 setCout(count + 1) // count === 0 lo que significa que en el próximo ciclo de renderizado, la cuenta será igual a 1
En el mismo escenario, si llamamos a handleChange4 en su lugar, estaríamos haciendo
setCout((prevCount) => prevCount + 1) // prevCount === 0 setCout((prevCoutn) => prevCount + 1) // prevCount === 1 lo que significa que en el próximo ciclo de renderizado, la cuenta será igual a 2
Espero que ayude a ilustrar lo que está pasando :)
Los documentos oficiales contienen un poco de información ya que ha pegado el enlace allí.
La función recibirá el valor anterior y devolverá un valor actualizado.
prevCount - es una variable de alcance functional , actualizada con la función de devolución de llamada. No define estas variables tal como existen y mueren dentro de la función y no tienen ningún significado fuera de ella. yo
El clic actualizará el estado usando el estado anterior usando una devolución de llamada. prevCount es el valor más reciente de count.
el prevCount es el valor actual de su estado antes de establecer un nuevo valor para su estado, por lo que si el estado era 1 y haga clic en el botón que suma 1 al valor anterior que significa antiguo => antiguo + 1 igual a 1 => 1 + 1 que devolverá 2