React ਵਿੱਚ useState ਦੀ ਗਾਈਡ
ਜਿਵੇਂ-ਜਿਵੇਂ ਤੁਸੀਂ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਤੁਹਾਡਾ ਪਾਸਵਰਡ ਬਾਰ ਕਮਜ਼ੋਰ (weak) ਤੋਂ ਮਜ਼ਬੂਤ (strong) ਵਿੱਚ ਬਦਲ ਜਾਂਦਾ ਹੈ। React ਤੁਹਾਡੀ ਟਾਈਪਿੰਗ ਨੂੰ state ਰਾਹੀਂ ਯਾਦ ਰੱਖਦਾ ਹੈ।
State ਡੇਟਾ ਨੂੰ ਸੰਭਾਲਦੀ ਹੈ। ਇਹ ਟ੍ਰੈਕ ਕਰਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਕੀ ਟਾਈਪ ਕਰਦੇ ਹੋ ਜਾਂ ਕਿਸ ਚੀਜ਼ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ।
ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਆਪਣਾ ਨਾਮ ਟਾਈਪ ਕਰਦੇ ਹੋ।
- ਤੁਹਾਡੀ ਸ਼ੁਰੂਆਤੀ state ਇੱਕ ਖਾਲੀ string ਹੈ।
- ਤੁਸੀਂ J ਟਾਈਪ ਕਰਦੇ ਹੋ।
- ਤੁਸੀਂ state ਨੂੰ "" ਤੋਂ "J" ਵਿੱਚ ਅਪਡੇਟ ਕਰਨ ਲਈ ਇੱਕ function ਕਾਲ ਕਰਦੇ ਹੋ।
- ਤੁਸੀਂ o ਟਾਈਪ ਕਰਦੇ ਹੋ।
- ਤੁਸੀਂ state ਨੂੰ "Jo" ਵਿੱਚ ਬਦਲਣ ਲਈ function ਕਾਲ ਕਰਦੇ ਹੋ।
ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ state ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹੋ, React UI ਨੂੰ re-render ਕਰਦਾ ਹੈ। Re-rendering ਦਾ ਮਤਲਬ ਹੈ ਕਿ React ਪੁਰਾਣੇ view ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਅਪਡੇਟ ਕੀਤੇ ਡੇਟਾ ਨਾਲ ਇੱਕ ਨਵਾਂ view ਬਣਾਉਂਦਾ ਹੈ।
ਆਮ variables ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਨਹੀਂ? ਇੱਕ ਆਮ variable ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਤਾਂ ਬਦਲ ਜਾਂਦਾ ਹੈ ਪਰ ਸਕ੍ਰੀਨ ਨੂੰ ਅਪਡੇਟ ਨਹੀਂ ਕਰਦਾ। ਤੁਹਾਡੇ ਯੂਜ਼ਰਸ ਨੂੰ ਪੁਰਾਣਾ ਡੇਟਾ ਦਿਖਾਈ ਦੇਵੇਗਾ। React state ਤੁਹਾਡੇ ਡੇਟਾ ਨੂੰ ਤੁਹਾਡੇ UI ਨਾਲ ਜੋੜ ਕੇ ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਸੁਲਝਾਉਂਦੀ ਹੈ।
useState ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ:
ਇਸਨੂੰ React ਤੋਂ import ਕਰੋ।
import { useState } from 'react';ਇਸਨੂੰ declare ਕਰੋ।
const [age, setAge] = useState(20);
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ:
- age ਤੁਹਾਡੀ ਮੌਜੂਦਾ value ਹੈ।
- setAge value ਨੂੰ ਬਦਲਣ ਲਈ function ਹੈ।
- 20 ਤੁਹਾਡੀ ਸ਼ੁਰੂਆਤੀ value ਹੈ।
ਹੁਣ ਇਸਨੂੰ ਅਜ਼ਮਾਓ। ਇੱਕ React project ਖੋਲ੍ਹੋ। ਇੱਕ counter ਬਣਾਓ। count ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਇੱਕ button 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਸਕ੍ਰੀਨ ਨੂੰ ਤੁਰੰਤ ਬਦਲਦੇ ਹੋਏ ਦੇਖੋ।
ਸਰੋਤ: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i