🧠 درک USESTATE در React

React همه چیز در مورد ساخت UI های پویا است – و برای انجام این کار ، ما به حالت نیاز داریم. یکی از اساسی ترین قلاب های React است useStateبشر

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

… چیست useState؟

useState قلاب در واکنش است که به شما امکان می دهد حالت اضافه کردن به مؤلفه های عملکردی. این به مؤلفه شما اجازه می دهد تا مقادیر بین رندرها را به خاطر بسپارید و هنگامی که این مقدار تغییر می کند UI را به روز کنید.

const [state, setState] = useState(initialValue);

• حالت → مقدار وضعیت فعلی
• چافت → تابعی برای به روزرسانی حالت
• مقادیر اولیه → مقدار اولیه حالت (می تواند یک بدوی ، شی ، آرایه یا عملکرد باشد)

🛠 مثال اساسی

import { useState } from "react";

export default function App() {
  const [step, setStep] = useState(1);
  {/*here step stores the default value i.e. 1 and 2nd parameter
  is the function which will help us updating the value of state.*/}

  function handlePrevious() {
    setStep(step + 1);
  }

  return (
    <div className="buttons">
      <p className="message">Step {step}p>
      <button onClick={handlePrevious}>Previousbutton>
    div>
  );
}

📝 توجه داشته باشید

• Usestate یک قلاب است – و قلاب ها باید در سطح بالای مؤلفه شما استفاده شوند.
• هرگز حالت را مستقیماً به روز نکنید – همیشه از عملکرد تنظیم کننده استفاده کنید

React REACTS to state changes by re-rendering the UI

🔍 مکانیک دولت

• هر زمان که دولت به روز شود ، واکنش مجدد به مؤلفه را نشان می دهد.
• حالت بین رأی دهندگان دوباره حفظ می شود-مگر اینکه مؤلفه ها از بین بروند (یعنی از UI ناپدید می شود).
• React دوباره عملکرد مؤلفه خود را در حین ارائه مجدد فراخوانی می کند ، اما حالت دست نخورده باقی می ماند.

⚡ نکاتی برای استفاده موثر از حالت

برای جلوگیری از مشکلات عملکرد ، مطمئن شوید که فقط در صورت لزوم حالت را به روز کنید.
✅ از توابع پاسخ به تماس استفاده کنید که حالت جدید شما به حالت فعلی بستگی داشته باشد.
❌ از استفاده از حالت برای ذخیره مقادیری که می توان از غرفه ها محاسبه کرد ، خودداری کنید.
✅ از حالت برای ذخیره داده های خاص برای مؤلفه استفاده کنید.
❌ هرگز دولت را مستقیماً جهش ندهید.

❌ بر اساس وضعیت فعلی مانند این به روز نکنید:

setStep(step - 1);

✅ از عملکرد پاسخ به تماس استفاده کنید وقتی حالت به مقدار فعلی بستگی دارد:

setStep((curStep) => curStep - 1);

اگر به روزرسانی حالت به وضعیت فعلی بستگی ندارد ، می توانید از روش مستقیم استفاده کنید.

🧩 مدیریت دولت در React

⬆ بلند کردن دولت
اگر مؤلفه های خواهر و برادر به همان حالت نیاز دارند ، آن را به نزدیکترین والدین مشترک بلند کنید.

حالت مشتق شده
حالت مشتق شده بر اساس یک قطعه دیگر از حالت یا غرفه محاسبه می شود – و در طول هر رندر محاسبه می شود.

🎮 عناصر کنترل شده در React

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

مراحل اجرای:

1. برای ورودی حالت ایجاد کنید.
2. مقدار ورودی را روی آن حالت تنظیم کنید.
3. برای به روزرسانی حالت از onchange استفاده کنید.

function Form() {
  const [description, setDescription] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Item.."
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
   {/* setting the value of item as state and then 
   updating the value of state by using setter function */}
    form>
  );
}

🔚 نتیجه گیری

**useState** اولین و مهمترین قلاب شما در React است. درک نحوه عملکرد آن ، چه موقع از تماس تلفنی و نحوه ساختار حالت به طور مؤثر شما را برای موفقیت در ایجاد UI های پویا و تعاملی تنظیم می کند.

برنامه نویسی مبارک! 💻✨

🙌 بیایید متصل شویم

من دوست دارم افکار ، سوالات یا بازخورد شما را بشنوم.
می توانید در GitHub به من برسید یا نظر خود را در زیر بگذارید.