El gancho useState() en reaccionar nos permite declarar una variable de estado que persiste durante los ciclos de renderizado. Si queremos volver a renderizar el componente, podemos hacerlo fácilmente llamando a la función setState() que se obtiene al desestructurar la array devuelta como resultado de llamar al gancho useState(). Cada vez que actualizamos el estado usando el método setState(), vuelve a representar el componente actual y sus componentes secundarios.
Sintaxis:
const [state, setState] = useState(initialState)
Cuando llamamos a la función setState, recibe la última instantánea de estado. Luego podemos usarlo dentro de la función setState() y devolver el nuevo valor al que queremos actualizar el nuevo valor de estado.
Sintaxis:
setState((latestState) => { // code logic return newState; })
configuración del proyecto
Para crear el nuevo proyecto de reacción, use el siguiente comando en la línea de comandos
npx create-react-app name_of_project
Después de ejecutar este comando, se creará un nuevo proyecto y la estructura de su proyecto se verá como se muestra a continuación.
App.js
import { useState } from 'react'; function App() { const [counter, setCounter] = useState(0); const handleIncrease = () => { setCounter((prev) => prev + 1); }; const handleDecrease = () => { setCounter((prev) => prev - 1); }; console.log('Rendering!!!'); return ( <div> <button onClick={handleDecrease}> decrease </button> <span> {counter} </span> <button onClick={handleIncrease}> increase </button> </div> ); } export default App;
Paso para ejecutar la aplicación: para iniciar su aplicación, use el siguiente comando en la línea de comandos.
npm start
Salida: abra el navegador y vaya a http://localhost:3000 , verá la siguiente salida.
Explicación: Cuando hacemos clic en el botón de aumento o disminución, se llama a las funciones handleIncrease o handleDecrease. Dentro de estas dos funciones, actualizamos el estado mediante la función setState(), por lo que nuestro componente de la aplicación se representa nuevamente e imprime un mensaje en la consola.
Publicación traducida automáticamente
Artículo escrito por shivamsingh00141 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA