Sé que en los componentes de la clase React, React usa el enlace "this" para "rastrear" los accesorios y el estado. En ganchos se consigue gracias a los cierres, es mi duda?
function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Este código funciona como esperaría un contador, si estuviera usando un componente de clase, tendría que usar setState() en el modo de devolución de llamada para acceder al estado anterior, pero en los ganchos, ¿cómo sucede la magia?
¿Hay ataduras en los ganchos o no?
React realiza un seguimiento del estado contando internamente la cantidad de veces que se llama a useState la primera vez que se monta un componente. El valor pasado a useState luego se establece en el estado interno de React. Por ejemplo, dado
const Component = () => { const [state1, setState1] = useState('one'); const [state2, setState2] = useState('two'); return 'foo'; };React tendrá el siguiente estado almacenado internamente:
['one', 'two'] con un elemento en la matriz de estado (oculta, interna) para cada llamada de useState que haya.
Cuando se llama a un setter de estado, el elemento correspondiente en la matriz de estado interna se actualizará y luego el componente se volverá a representar. Cuando un componente se vuelve a representar, cada llamada a useState devuelve el elemento apropiado en la matriz de estado interna. La primera llamada a useState devolverá el primer elemento de la matriz de estado interna, la segunda llamada a useState devolverá el segundo elemento, y así sucesivamente.
En su código, con ganchos, el controlador de clic tiene un cierre sobre el valor de count que existía en ese render particular de Counter.
si estuviera usando un componente de clase, tendría que usar setState() en el modo de devolución de llamada para acceder al estado anterior
Realmente no: si este código fuera un componente de clase, sería libre de hacer referencia a this.state.count directamente sin usar la versión de devolución de llamada.