logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش React useState Hook

آموزش 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" }
});
}

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

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

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

دوره ارز دیجیتال تاپ سایت 98

منبع: w3schools

تگ: آموزش React

دوره های آموزشی دوره های آموزشی

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

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

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

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