استفاده از هوک useState در React

هوک useState یکی از معروف‌ترین هوک‌های React است و این امکان را به ما می‌دهد تا یک متغیر state را به کامپوننت خود اضافه کنیم. هوک useState می‌تواند به راحتی رشته‌ها، آرایه‌ها، اعداد، آبجکت‌ها و موارد دیگر را در خود نگه دارد.

در این مقاله قصد داریم با هوک useState آشنا شویم و کاربرد آن را با سه مثال مختلف بررسی نماییم که این سه مثال عبارتند از: یک دکمه با رندر شرطی، مدیریت فرم و مثال شمارنده.

برای شروع کار، هنگامی که برنامه React خود را راه‌اندازی و اجرا کردیم، آماده استفاده از هوک useState می‌باشیم. در ابتدا باید این هوک را به صورت زیر import کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { UseState } from 'react';
import { UseState } from 'react';
import { UseState } from 'react';

هوک useState چگونه کار می‌کند؟

هوک useState با مدیریت state در برنامه‌های ما کار می‌کند. این مقدار اولیه state را به عنوان آرگومان می‌گیرد. سپس مقدار دوم، state ما را تنظیم می‌کند، به همین دلیل است که همیشه به عنوان setState شروع می‌شود. اکنون بررسی می‌کنیم که این کار را چگونه انجام می‌دهد؟

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const [state, setState] = useState(initial values goes here)
const [calories, setCalories] = useState(initial value of calories)
const [state, setState] = useState(initial values goes here) const [calories, setCalories] = useState(initial value of calories)
const [state, setState] = useState(initial values goes here)

const [calories, setCalories] = useState(initial value of calories)

در مورد رندر اول، state اولیه را با استفاده از تابع

set
set، برمی‌گرداند و در حین رندر مجدد به مقدار متفاوتی به‌روزرسانی می‌شود.

رندر شرطی با هوک useState

در این مثال می‌بینیم که چطور می‌توانیم بسته به دو شرط این که آیا کاربر وارد شده است یا خیر، state را به‌روزرسانی کنیم. همچنین مشاهده می‌کنیم که چرا state اولیه را روی

false
false، به این معنی که کاربر وارد نشده است تنظیم کرده‌ایم.

ما می‌خواهیم یک دکمه ورود ایجاد کنیم که از هوک useState برای ارائه دو نتیجه متفاوت استفاده می‌کند.

یک دکمه برای ورود به برنامه است که متن آن از کاربر می‌خواهد وارد شود. دیگری دکمه‌ای است که پس از ورود کاربر به برنامه، امکان خروج از برنامه را به او می‌دهد.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React from 'react'
const Signin = () => {
return (
<div>
<div>
<button type="button">Sign Out</button>
<p>Welcome back, good to see you in here<p>
</div>
<div>
<button type="button">Sign In</button>
<p>Please Sign in</p>
</div>
</div>
)
}
export default Signin;
import React from 'react' const Signin = () => { return ( <div> <div> <button type="button">Sign Out</button> <p>Welcome back, good to see you in here<p> </div> <div> <button type="button">Sign In</button> <p>Please Sign in</p> </div> </div> ) } export default Signin;
import React from 'react'

const Signin = () => {
  return (
    <div>
        <div>
            <button type="button">Sign Out</button>
            <p>Welcome back, good to see you in here<p>
        </div>
        <div>
            <button type="button">Sign In</button>
            <p>Please Sign in</p>
        </div>
    </div>
  )
}

export default Signin;

برای پیاده‌سازی عملکردهای ورود و خروج از برنامه، باید هوک useState را import کنیم. سپس باید از رندر شرطی استفاده نماییم تا مشخص کنیم که دکمه‌ها چگونه به یک کلیک پاسخ می‌دهند.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { useState } from 'react'
const Signin = () => {
const [signedin, setSignedin] = useState(false)
const handleSignin = () => {
setSignedin(true)
}
const handleSignout = () => {
setSignedin(false)
}
return (
<div>
{ signedin ? (
<div>
<button type="button" onClick={handleSignout}>Sign Out</button>
<p>Welcome back, good to see you in here</p>
</div>) :
(<div>
<button type="button"onClick={handleSignin}>Sign In</button>
<p>Please Sign in</p>
</div>)
}
</div>
)
}
export default Signin;
import React, { useState } from 'react' const Signin = () => { const [signedin, setSignedin] = useState(false) const handleSignin = () => { setSignedin(true) } const handleSignout = () => { setSignedin(false) } return ( <div> { signedin ? ( <div> <button type="button" onClick={handleSignout}>Sign Out</button> <p>Welcome back, good to see you in here</p> </div>) : (<div> <button type="button"onClick={handleSignin}>Sign In</button> <p>Please Sign in</p> </div>) } </div> ) } export default Signin;
import React, { useState } from 'react'

const Signin = () => {
    const [signedin, setSignedin] = useState(false)

    const handleSignin = () => {
        setSignedin(true)
    }

    const handleSignout = () => {
        setSignedin(false)
    }
  return (
         <div>
           { signedin ? ( 
        <div>
            <button type="button" onClick={handleSignout}>Sign Out</button>
            <p>Welcome back, good to see you in here</p>
        </div>) :
        
        (<div>
            <button type="button"onClick={handleSignin}>Sign In</button>
            <p>Please Sign in</p>
        </div>)
           }
        </div>
  )
}

export default Signin;

بررسی ساختار کد مثال

ابتدا یک متغیر با هوک useState ایجاد کردیم که

signedin
signedin را روی
false
false قرار می‌دهد. زیرا در بارگذاری اول، نمی‌خواهیم کاربر وارد برنامه شود. اما وقتی روی دکمه ورود کلیک کرد، می‌تواند وارد شود.

سپس متغیرهایی را ایجاد کردیم که به ترتیب ورود به برنامه، خروج از برنامه و تنظیم تابع

set
set روی
true
true و
false
false، یعنی
handleSignin
handleSignin و
handleSignout
handleSignout را انجام می‌دهند. پس از آن، یک handler
onClick
onClick
ایجاد کردیم که با کلیک بر روی دکمه یک اکشن را راه‌اندازی می‌کند. این اکشن توسط عملگر شرطی (ternary) هدایت می‌شود.

بنابراین، اگر روی دکمه ورود کلیک کنیم، وارد برنامه شده و یک پیام خوشامدگویی دریافت می‌کنیم. هنگامی که روی دکمه خروج کلیک کنیم، با پیام

please sign in
please sign in از ما درخواست می‌شود تا دوباره عمل لاگین را انجام دهیم.

نحوه استفاده از هوک useState در برنامه React Counter

این مثال نشان می‌دهد که چگونه می‌توانیم از هوک useState برای به‌روزرسانی state خود از طریق کلیک استفاده نماییم.

کاری که این شمارنده انجام می‌دهد این است که تعداد کلیک‌های ما را می‌شمارد. بنابراین، اگر روی دکمه به تعداد ۱۲ بار کلیک کنیم، شمارنده به ۱۲ به‌روزرسانی می‌شود. البته باید به این نکته توجه داشته باشیم که دکمه در هر کلیک به‌روزرسانی می‌گردد.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React from 'react';
const Newcounter = () => {
return (
<div>
<button type="button">You will see the count here</button>
</div>
)
}
export default Newcounter;
import React from 'react'; const Newcounter = () => { return ( <div> <button type="button">You will see the count here</button> </div> ) } export default Newcounter;
import React from 'react';


const Newcounter = () => {
    return (
        <div>
            <button type="button">You will see the count here</button>
        </div>
    )
}


export default Newcounter;

برای functionality شمارنده، ابتدا باید هوک useState را import کنیم سپس از آن مانند شکل زیر استفاده نماییم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const [count, setCount] = useState(0)
const [count, setCount] = useState(0)
const [count, setCount] = useState(0)

سپس متغیر دیگری ایجاد می‌کنید که تعداد را از ۰ به ۱، ۲، ۳ افزایش می‌دهد.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const incrementCount = () => { setCount (count + 1) }
const incrementCount = () => { setCount (count + 1) }
const incrementCount = () => { setCount (count + 1) }

اکنون می‌توانیم از یک handler

onClick
onClick مطابق شکل زیر استفاده کنیم و تعداد افزایش یافته را return نماییم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { useState } from 'react';
const Newcounter = () => {
const [count, setCount] = useState(0)
const incrementCount = () => {
setCount(count + 1)
}
return (
<div>
<button type="button" onClick={incrementCount}>You clicked
{count} times</button>
</div>
)
}
export default Newcounter;
import React, { useState } from 'react'; const Newcounter = () => { const [count, setCount] = useState(0) const incrementCount = () => { setCount(count + 1) } return ( <div> <button type="button" onClick={incrementCount}>You clicked {count} times</button> </div> ) } export default Newcounter;
import React, { useState } from 'react';


const Newcounter = () => {
    const [count, setCount] = useState(0)

    const incrementCount = () => {
        setCount(count + 1)
    
    }
    return (
        <div>
            <button type="button" onClick={incrementCount}>You clicked  
            {count} times</button>
        </div>
    )
}


export default Newcounter;

نحوه استفاده از هوک useState در یک فرم در React

فرم‌ها از هوک useState استفاده می‌کنند و به توسعه‌دهنده‌ها اجازه می‌دهند تا یک state خالی را تنظیم کنند که از تابع

set
set برای رسیدگی به آنچه کاربر به‌عنوان ورودی خود تایپ می‌کند، استفاده می‌نماید.

در این مثال ما قصد داریم تا نام و ایمیل کاربران را از طریق یک فرم جمع‌آوری کرده و سپس اطلاعات را ارسال کنیم. به عنوان مثال:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React from 'react'
const Theform
= () => {
return (
<div>
<form>
<input type="text" placeholder="enter your name" required />
<input type="email" placeholder="enter your email" required />
<button type="submit">Submit</button>
</form>
</div>
)
}
export default Theform;
import React from 'react' const Theform = () => { return ( <div> <form> <input type="text" placeholder="enter your name" required /> <input type="email" placeholder="enter your email" required /> <button type="submit">Submit</button> </form> </div> ) } export default Theform;
import React from 'react'

const Theform
 = () => {
  return (
    <div>
        <form>
            <input type="text" placeholder="enter your name" required />
            <input type="email" placeholder="enter your email" required />
            <button type="submit">Submit</button>
        </form>

    </div>
  )
}

export default Theform;

ابتدا هوک useState را در فایل خود import کرده، سپس با استفاده از آن نام و ایمیل را null می‌کنیم. اکنون کاربر می‌تواند اطلاعات خود را وارد کند.

پس از آن، یک arrow function با نام

handleSubmit
handleSubmit، که البته می‌تواند هر اسم دیگری داشته باشد ایجاد می‌کنیم که متد
preventDefault()
preventDefault() را اجرا می‌نماید. نام کاربر و ایمیل او را با استفاده از
console.log()
console.log() در کنسول نمایش می‌دهیم تا بتوانیم این جزئیات را با استفاده از event handler
onSubmit()
onSubmit() دریافت نماییم.

بعد از آن، می‌توانیم از تابع

set
set هم برای نام و هم برای ایمیل استفاده کنیم تا اگر تغییری در ورودی اتفاق افتاد بتوانیم آن را مدیریت نماییم و مقدار ورودی را که به عنوان
user
user و
email
email در هوک useState مقداردهی اولیه کرده بودیم، دریافت کنیم.

باید این موضوع را به یاد داشته باشیم که این هوک از تابع

set
set برای رندر مجدد استفاده می‌کند. به این ترتیب، هنگامی که کاربر مقادیر جدید را در فرم وارد می‌کند، ما آن را دوباره رندر می‌نماییم. به همین دلیل است که در ورودی خود value را به عنوان
value={user}
value={user} تنظیم می‌کنیم.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { useState }from 'react'
const Theform
= () => {
const [user, setUser] = useState('')
const [email, setEmail] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
console.log(user, email)
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="enter your name" onChange={(e)
=> {setUser(e.target.value)}} value ={user} required />
<input type="email" placeholder="enter your email" onChange={(e)
=> {setEmail(e.target.value)}} value={email} required />
<button type="submit">Submit</button>
</form>
</div>
)
}
export default Theform;
import React, { useState }from 'react' const Theform = () => { const [user, setUser] = useState('') const [email, setEmail] = useState('') const handleSubmit = (e) => { e.preventDefault() console.log(user, email) } return ( <div> <form onSubmit={handleSubmit}> <input type="text" placeholder="enter your name" onChange={(e) => {setUser(e.target.value)}} value ={user} required /> <input type="email" placeholder="enter your email" onChange={(e) => {setEmail(e.target.value)}} value={email} required /> <button type="submit">Submit</button> </form> </div> ) } export default Theform;
import React, { useState }from 'react'

const Theform
 = () => {

  const [user, setUser] = useState('')
  const [email, setEmail] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(user, email)

  }
  return (
    <div>
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="enter your name"  onChange={(e) 
            => {setUser(e.target.value)}} value ={user} required />
                
            <input type="email" placeholder="enter your email" onChange={(e)  
            => {setEmail(e.target.value)}} value={email} required />
            <button type="submit">Submit</button>
            
        </form>

    </div>
  )
}

export default Theform;

جمع‌بندی

در این مقاله سعی کردیم با در نظر گرفتن سه مثال مختلف با هوک useState در React آشنا شویم.توجه به این نکته لازم است که این هوک نیز مانند سایر هوک‌های React از قوانین کلی React Hook تبعیت می‌کند.

دیدگاه‌ها:

افزودن دیدگاه جدید