آموزش React useState Hook

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 قصد داریم به نحوه درج، ویرایش و نمایش اطلاعات بپردازیم و برای این کار می توانیم از دستور useState استفاده کنیم.

React useState Hook به ما امکان می دهد محتوا را در سایت مدیریت کنیم.

State به طور کلی به داده ها یا ویژگی هایی اشاره دارد که باید در یک برنامه ردیابی شوند.

ایمپورت کردن useState

برای استفاده از useState Hook، ابتدا باید آن را به کامپوننت خود وارد یا ایمپورت کنیم.

ما می توانیم با استفاده از state به متغیرها مقدار اولیه دهیم یا آن را آپدیت کنیم.

در خطوط اول باید useState را به شکل زیر ایمپورت import کنیم.

import { useState } from "react";

مقداردهی اولیه با useState

ما می توانیم به متغیر، مقدار اولیه دهیم. در مثال زیر ما مقدار اولیه را خالی قرار داده ایم اما می توانیم در داخل کوتیشن مقدار دلخواه را نیز وارد کنیم و در برنامه آن را تغییر دهیم.

ما متغیری با نام color داریم و setColor نیز برای تغییر آن استفاده می شود که در ادامه توضیح خواهیم داد.

import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}

خواندن state

در مثال زیر ابتدا متغیری با نام color را معرفی کردیم. سپس با setColor به آن مقدار اولیه red دادیم.

حال در بخش return می توانیم مقدار color را نمایش دهیم. در تگ h1 مقدار color نمایش داده شده است.

import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

آپدیت state

در مثال بالا با نحوه مقداردهی اولیه و نحوه خواندن مقدار آشنا شدید. حال می خواهیم مقدار را آپدیت کنیم.

در رویداد کلیک دکمه button ما با استفاده از setColor مقدار را تغییر داده ایم.

import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button type="button" onClick={() =>
setColor("blue")}>Blue</button> </>
)
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

در state چه چیزی نگهداری می شود؟

از useState Hook می توان برای نگهداری رشته ها، اعداد، بولی ها، آرایه ها، اشیا و ترکیبی از آنها استفاده کرد!

به مثال زیر توجه کنید. ما برای کامپوننت Car چندین متغیر تعریف کرده ایم و با useState به آنها مقدار داده ایم و در برنامه از این مقادیر استفاده کرده ایم.

import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));

همچنین می توانیم از روش زیر نیز استفاده کنیم.

ما فقط می توانیم از یک state استفاده کنیم و به جای آن یک شی را اضافه کنیم!

یک هوک واحد ایجاد کنید که یک شی را در خود نگه دارد:

import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "2022",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));

آپدیت object و آرایه در state

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

برای بروزرسانی یا آپدیت اشیا (object) و آرایه ها در state می توان مشابه مثال زیر عمل کرد.

const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}

حال مقادیر قبلی ثابت مانده و مقدار رنگ تغییر می کند.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

وبسایت شخصی داشته باشید

وبسایت بدون هزینه تمدید

جذب مشتری - افزایش فروش

پیشنهاد ما: وبسایت برای کسب و کار شما یوتیوب ما - دوره رایگان طراحی سایت و کامپیوتر دوره ویژه فارکس - بورس و ارز دیجیتال تبلیغات اینترنتی - با هزینه ای ناچیز عضویت در تیم فارکس و بورس آموزش - تحلیل و سیگنال رایگان ارز دیجیتال دوره رایگان ارز دیجیتال بهترین دوره های آموزشی - جهت ورود به بازار کار

منبع: w3schools

تگ: آموزش React

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.