Component State در React

setState چه کاری را انجام می‌دهد؟

setState() یک آپدیت را در آبجکت state کامپوننت برنامه ریزی می‌کند. وقتی حالت تغییر کند، کامپوننت با رندر مجدد واکنش نشان می‌دهد.

تفاوت بین state و props در چیست؟

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

در اینجا منابعی را معرفی می‌کنیم که در مورد زمان استفاده از props و یا state توضیحات خوبی آورده‌اند:

چرا setState مقادیر اشتباهی به من می‌دهد؟

در React هردوی this.props و this.state مقادیر رندر شده را نشان می‌دهند، یعنی چیزی که در حال حاضر روی صفحۀ نمایش است.

فراخوانی‌های setState ناهمگام هستند، لذا بر this.state جهت بازتاب مقادیر جدید بلافاصله پس از فراخوانی setState تکیه نکنید. اگر نیاز به محاسبۀ مقادیر بر میبنای حالت کنونی نشان داده شده در صفحه دارید، یک تابع آپدیت کننده را به جای یک آبجکت منتقل کنید. (برای جزئیات بیشتر مطالب زیر را ببینید)

مثال از کدی که مطابق انتظار رفتار نمی‌کند:

incrementCount() {
  // Note: this will *not* work as intended.
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  // Let's say `this.state.count` starts at 0.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
  // When React re-renders the component, `this.state.count` will be 1, but you expected 3.

  // This is because `incrementCount()` function above reads from `this.state.count`,
  // but React doesn't update `this.state.count` until the component is re-rendered.
  // So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1.

  // The fix is described below!
}

جهت یادگیری نحوۀ درست کردن این مشکل، مطالب زیر را ببینید.

چگونه حالت را با مقادیری که به حالت کنونی وابسته هستند آپدیت کنم؟

یک تابع را به جای یک آبجکت به setState منتقل کنید تا مطمئن شوید آن فراخوانی همیشه از آخرین ورژن حالت استفاده می‌کند.

تفاوت بین انتقال یک آبجکت و انتقال یک تابع در setState چیست؟

انتقال یک تابع آپدیت به شما اجازۀ دسترسی به مقدار حالت کنونی داخل آپدیت کننده را می‌دهد. از آنجایی که فراخوانی‌های setState دسته بندی شده‌اند، به شما اجازه می‌دهد آپدیت‌ها را به هم زنجیر و مرتب کنید و مطمئن شوید که آنها روی هم ساخته می‌شوند و تناقضی با هم ندارند:

incrementCount() {
  this.setState((state) => {
    // Important: read `state` instead of `this.state` when updating.
    return {count: state.count + 1}
  });
}

handleSomething() {
  // Let's say `this.state.count` starts at 0.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // If you read `this.state.count` now, it would still be 0.
  // But when React re-renders the component, it will be 3.
}

در مورد setState بیشتر بدانید.

چه موقع setState ناهمگام است؟

در حال حاضر setState داخل کنترل کننده‌های رویدادها ناهمگام است.

این یعنی، به عنوان مثال، هردوی Parent و Child حین یک رویداد کلیک، setState را فراخوانی کنند، Child دوبار رندر مجدد نخواهد شد. در مقابل ری اکت آپدیت‌های حالت را در پایان رویداد مرورگر، پاک خواهد کرد. این عمل در برنامه‌های بزرگ، باعث بهبود قابل توجه عملکرد خواهد شد.

این یک جزئیات پیاده سازی است و از تکیۀ مستقیم بر آن اجتناب کنید. در نسخه‌های آینده، ری اکت در موارد بیشتری به طور پیش‌فرض آپدیت‌ها را بسته بندی می‌کند.

چرا ری اکت this.state را به طور همگام آپدیت نمی‌کند؟

همانطور که در بخش قبلی توضیح داده شد، ری اکت عمدا تا زمانی که تمام کامپوننت ها setState() را داخل کنترل کننده‌های رویداد خود تا قبل از شروع رندر مجدد فراخوانی کنند، صبر می‌کند. این کار با جلوگیری از رندرهای مجدد غیرلازم، باعث سرعت بخشیدن به عملکرد خواهد شد.

هرچند شاید هنوز برایتان جای تعجب باشد که چرا ری اکت this.state را بلافاصله و بدون رندر مجدد آپدیت نمی‌کند.

دو دلیل اصلی وجود دارد:

  • این کار سازگاری بین props و state را از بین می‌برد که باعث بروز مشکلاتی می‌شود که حل آنها بسیار دشوار است.
  • این کار پیاده سازی برخی قابلیت‌های جدیدی که ما در حال کار روی آنها هستیم را غیرممکن می‌سازد.

این GitHub comment مثال‌هایی در این مورد آماده کرده است.

آیا باید از یک کتابخانۀ مدیریت کنندۀ state مانند Redux یا MobX استفاده کنم؟

شاید.

بهتر است قبل از این که کتابخانه‌های دیگری را اضافه کنیم، ابتدا با React به خوبی آشنا شویم. شما می‌توانید فقط با استفاده از ری اکت هم برنامه‌های خیلی پیچیده‌ای را خلق کنید.

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit