Soy muy principiante en React. Y ahora estoy estudiando sobre el método setState().
Estoy estudiando con una instrucción de tutorial para principiantes, pero hay algo que no puedo entender.
El tema que trató el tutorial fue hacer un componente de contador que muestre un valor cambiante cuando hacemos clic en los botones más o menos.
El ejemplo era como:
function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( <div> <h1>{number}</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div> ); }Y mientras aprendía, pensé en este método:
function Counter() { let number = 0; const onIncrease = () => { console.log({number}); number++; console.log({number}); } const onDecrease = () => { number-=1; } return ( <div> <h1>{number}</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div> ) }Como puede reconocer fácilmente, no funcionó.
Pero no puedo entender por qué no funciona correctamente. Parece estar relacionado con por qué usamos setState() como creo.
Gracias por su preocupación, y le agradecería mucho si pudiera dejar una respuesta.
Todo esto se relaciona con el ciclo de vida de React. Cuando tiene una biblioteca MV*, la idea es que haya un modelo de datos conectado a una interfaz de usuario, y cuando actualice su modelo de datos, la biblioteca hará el trabajo para actualizar su interfaz de usuario en consecuencia. Para que la biblioteca actualice la interfaz de usuario, debe saber que el modelo de datos ha cambiado . Si simplemente actualiza los valores en JS simple, la biblioteca no tiene una manera fácil o eficaz de saber que el modelo de datos ha cambiado. Por este motivo, la biblioteca proporciona sus propios métodos para actualizar el modelo de datos: si solo actualiza el modelo de datos con estos métodos, la biblioteca sabrá que el modelo de datos ha cambiado y que se debe programar una actualización de la interfaz de usuario.
Reasignar una variable, por sí mismo, (casi) nunca tiene efectos secundarios; esto es cierto no solo en React, sino también en todo JavaScript. Debe decirle a React de manera que entienda que un valor ha cambiado y que, como resultado, el componente debe volver a renderizarse, por lo tanto, es necesario llamar a una función ( setNumber ).
Con el paradigma de React, la forma en que se renderiza un componente debe determinarse completamente a partir del estado (y accesorios) de ese componente, en su mayor parte. React puede realizar un seguimiento de los cambios en el estado y los accesorios fácilmente; no puede (nada en JavaScript puede) realizar un seguimiento de las variables reasignadas automáticamente.
Llamar a un setter de estado como setNumber le dice a React que:
Si solo reasigna una variable, como number++ , ninguno de los dos puede lograrse.
El componente de la función Reactjs también es una función normal, cada renderiza la function que se invoca nuevamente.
Y cuando declaras let number = 0; como variable local en una función normal, does it keep the last value from the last invoke? Obviamente no,
Entonces React funciona de la misma manera.
Entonces, para mantener su local variable dentro de las invocaciones, necesitará tener una forma de almacenarlas fuera de su función, useState o useRef son dos de ellas.