state as snaoshot

سلام

ممنون میشم یک توضیحی درمورد متن زیر بدید:

As a component’s memory, state is not like a regular variable that disappears after your function returns. State actually “lives” in React itself—as if on a shelf!—outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated using the state values from that render!

سلام،

به بیان ساده‌تر میگه: حالت (state) توی React مثل یه متغیر معمولی نیست که بعد از اجرای تابع از بین بره. توی React، state بیرون از تابع زندگی میکنه، انگار روی یه قفسه قرار داره! وقتی React کامپوننتت رو اجرا میکنه، یه کپی از state رو برات میفرسته. کامپوننتت هم یه کپی از رابط کاربری (UI) رو برمیگردونه که با state همون لحظه ساخته شده.

فرض کن یه کامپوننت داریم به اسم Counter که تعداد کلیک‌های یه دکمه رو نشون میده:

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Counter;

اینجا count همون state ماست که با useState تعریف شده. هر بار که دکمه "Click me" رو میزنی، مقدار count یکی زیاد میشه و React دوباره کامپوننت رو با مقدار جدید count رندر میکنه.

اینطوری، state همیشه خارج از تابع نگه داشته میشه و هر بار که کامپوننت رندر بشه، مقدار جدیدش به تابع داده میشه.

بهترین پاسخ

محسن موحد ۲۷ خرداد ۱۴۰۳، ۰۵:۴۸