برنامه نویسی

روشهای چرخه عمر و معرفی قلاب ها

مقدمه

در ما آموزش قبلی در مورد رسیدگی به رویداد و ارائه شرطی در React ، ما در تعامل کاربر صفر شدیم و یکپارچه نمایش داده شده یا بیت های UI را نشان می دهیم. حالا ، بیایید قدم بگذاریم و نگاه کنیم چرخه عمر مؤلفه React– چگونه متولد شده ، زندگی می کند و پاک می شود – و ما نیز به آن فرو می رویم قلاب، روش مدرن برای رسیدگی به عوارض و عوارض جانبی.

این که آیا شما عاشق اجزای کلاس هستید یا همه چیز در مورد عملکردهای کاربردی هستید ، گرفتن یک دسته از چرخه عمر تضمین می کند که می توانید برنامه هایی را انجام دهید که به طور مداوم رفتار می کنند. این قطعه شما را از طریق روشهای چرخه عمر قدیمی React React پیاده می کند و آنها را در کنار نحوه مقابله قلاب ها با همان وظایف (با یک نحو سبک تر ، ممکن است اضافه کنم) قرار می دهد.


آنچه را پوشش خواهیم داد

  • REACT RUNDOWN

    چگونه یک مؤلفه نصب ، به روز شده و بدون شمار می شود.

  • روشهای چرخه عمر در اجزای کلاس

    موارد دلخواه مانند componentDidMountبا componentDidUpdate، و چگونه componentWillUnmount به نگه داشتن نشت حافظه در خلیج کمک می کند.

  • معرفی به قلاب

    چرا قلاب ها یک معامله بزرگ هستند ، به علاوه سریع داخل useState وت useEffectبشر

  • نمونه های عملی

    استفاده از دنیای واقعی و نحوه مقایسه این رویکردها.

  • مشکلات و بهترین روشها

    کد خود را مرتب و عملکرد تیز نگه دارید.


1. یک چرخه چرخه حیات سریع

اجزای کلاس سه مرحله را دنبال می کنند:

  1. نصب: متولد و درج شده (از ایجاد اولیه عناصر آن گرفته تا اتصال آنها در مرورگر).

  2. بروزرسانی: در هنگام تغییر یا تغییر حالت ، مجدداً پاسخ دهند.

  3. ناسازگار: این مؤلفه به خوبی از DOM خارج می شود.

هر مرحله روش هایی دارد که می توانید از آن غافل شوید ، که هم قدرتمند است و هم کمی خسته کننده است.


2. روشهای چرخه عمر مؤلفه کلاس

  1. componentDidMount()

    درست پس از نشان دادن مؤلفه در DOM ، که مکانی ایده آل برای اجرای کدی است که به مؤلفه موجود در سند بستگی دارد (مانند واکشی های اولیه داده ها ، دستکاری های DOM یا اتصال به خدمات خارجی).

  2. componentDidUpdate(prevProps, prevState)

    پس از هر بروزرسانی آتش می گیرد. در اینجا ، با مقایسه می توانید بررسی کنید که چه چیزی تغییر کرده است prevProps یا prevState با مقادیر فعلی اگر چیز مهمی متفاوت باشد ، ممکن است منطق دیگری را ایجاد کنید (مانند واکشی داده های جدید یا به روزرسانی DOM). مراقب باشید ، هرچند – اگر تماس بگیرید this.setState در اینجا بدون شرط ، می توانید یک حلقه بی نهایت ایجاد کنید. این مکان مناسب برای رسیدگی به عوارض جانبی مانند ترفندهای DOM ، ارسال داده های تجزیه و تحلیل یا منابع مالی به طور مشروط بر اساس غرفه های به روز شده است.

  3. componentWillUnmount()

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

  4. دیگران

    shouldComponentUpdate() به شما کمک می کند تا تصمیم بگیرید که آیا یک رندر بر اساس تغییرات Prop/State مورد نیاز است-برای فشار دادن عملکرد اضافی از برنامه شما. در ضمن ، getSnapshotBeforeUpdate() درست قبل از به روزرسانی DOM اجرا می شود و به شما امکان می دهد اطلاعات (مانند موقعیت های پیمایش) را برای استفاده بلافاصله پس از به روزرسانی DOM ضبط کنید. در حالی که شما همیشه این موارد را نمی بینید ، آنها در سناریوهای پیشرفته یا لبه ای بسیار ارزشمند هستند که در آنجا به کنترل محکم رفتار مؤلفه خود نیاز دارید.

نمونه مبتنی بر کلاس

class Timer extends React.Component {
  state = { seconds: 0 };

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState((prev) => ({ seconds: prev.seconds + 1 }));
    }, 1000);
  }

  componentDidUpdate() {
    console.log(`Timer updated: ${this.state.seconds}`);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return <h2>Elapsed: {this.state.seconds}s</h2>;
  }
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


3. قلاب ها را وارد کنید

قلاب های React (از 16.8 به بعد) به اجزای عملکردی وضعیت و ابرقدرت های عارضه جانبی می دهند – کلاس های لازم نیست.

چرا قلاب؟

  • دیگ بخار کمتر: دیگر آشفتگی با thisبشر

  • منطق قابل استفاده مجدد: قلاب های سفارشی به شما اجازه می دهد تا الگوهای بسته بندی شده.

  • پاک کننده: اجزای خود را ساده تر نگه دارید.

useState واد useEffect

  • useState: برای حالت محلی ، اجازه دهید تا مؤلفه شما داده هایی را که با گذشت زمان تغییر می کند (مانند پیشخوان ، ضامن یا قسمت های ورودی) پیگیری کند. هر تماس به useState یک قطعه حالت و یک عملکرد تنظیم کننده را برمی گرداند ، و اطمینان می دهد که هنگام بروزرسانی آن حالت را به روز می کنید ، به طور خودکار مجدداً مؤلفه را بازگردانید تا تغییرات را منعکس کند.

  • useEffect: این قلاب از تمام آن عوارض جانبی که اجزای کلاس برای کنترل آن استفاده می کنند ، مراقبت می کند componentDidMountبا componentDidUpdateوت componentWillUnmountبشر این جایی است که می توانید هنگامی که مؤلفه روی صفحه قرار دارد ، می توانید داده ها را واکشی کنید ، به دنبال تغییر در غرفه ها یا حالت باشید و در صورت عدم جمع آوری یک عملکرد پاکسازی را اجرا کنید. این بدان معناست که همه چیز از واکشی داده های ساده گرفته تا DOM پیشرفته تر یا مدیریت اشتراک می تواند در یک مکان واحد و سازمان یافته زندگی کند – فقط به آرایه وابستگی توجه داشته باشید تا از حلقه های بی نهایت جلوگیری شود.

نمونه مبتنی بر قلاب

import React, { useState, useEffect } from 'react';

function TimerHook() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <h2>Elapsed: {seconds}s</h2>;
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

توجه کنید که چگونه یک تک useEffect می تواند همه این کارها را انجام دهد – به روز ، به روزرسانی و تمیز کردن.


چرخه عمر ، راه قلاب

  • نصب: useEffect(() => { ... }, []) یک بار اجرا می شود.

  • بروزرسانی: useEffect(() => { ... }, [dep]) روی تغییرات اجرا می شود.

  • ناسازگار: یک عملکرد پاکسازی را در داخل برگردانید useEffectبشر


5. مقایسه کلاس سریع در مقابل قلاب

طبقه

componentDidMount() {
  // fetch once
}

componentDidUpdate() {
  // watch some updates
}

componentWillUnmount() {
  // cleanup
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

قلاب

useEffect(() => {
  // fetch once
}, []);

useEffect(() => {
  // watch some updates
}, [someVar]);

// cleanup is in the return statement
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


6. پیوند دادن آن به رسیدگی به رویداد و ارائه مشروط

در آخرین آموزش ، ما دیدیم که چگونه می توان مؤلفه ها را نشان داد و به وقایع کاربر پاسخ داد. این منطق هنوز در اجزای کلاس یا عملکرد اعمال می شود. اما وقتی محرک های چرخه عمر را اضافه می کنیم (یا useEffect در قلاب) ، ما کنترل ریز و درشت بیشتری را بر روی چه موقع و چگونگی به روزرسانی UI به دست می آوریم.


7. GOTCHAS و بهترین روش ها

  1. حلقه های نامتناهی: اگر شما useEffect برخی از حالت ها را که در آرایه وابستگی نیز وجود دارد ، اصلاح می کند ، شما هر بار که دولت تغییر می کند ، دوباره اثر را به خطر می اندازید-به یک چرخه بی پایان ارائه می شود. به عنوان مثال ، اگر یک اثر در هر اجرا حالت را تعیین کند ، آن حالت جدید باعث ایجاد یک رندر دیگر می شود که دوباره اثر را ایجاد می کند و غیره. برای جلوگیری از این امر ، یا به روزرسانی های حالت خود را شرط کنید یا آنها را از آرایه وابستگی خارج کنید ، مگر اینکه واقعاً مورد نیاز باشد ، اطمینان حاصل کنید که خود را در یک حلقه نامحدود به دام نمی اندازید.

  2. پاکسازی: همیشه فواصل نامشخص یا پاکسازی را در عملکرد پاکسازی انجام دهید.

  3. جدایی نگرانی ها: اگر منطق متفاوتی را تحمل می کنند ، از چندین جلوه استفاده کنید. همه چیز را به یکی تبدیل نکنید.


8. بسته بندی

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

آمدن بعدی: ما قلاب های پیشرفته تری را کشف خواهیم کرد و وضعیت جهانی را با آن مدیریت خواهیم کرد useContextبشر تا آن زمان ، الگوهای مربوط به آموزش قبلی خود را تمرین کنید و آنها را با روش های چرخه عمر در ذهن اعمال کنید.

سوالی دارید؟ احساس راحتی کنید که آنها را در نظرات رها کنید یا به رسانه های اجتماعی دسترسی پیدا کنید. بیایید مهارت های واکنش نشان دهیم!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا