ReactJS: چه زمانی از Class Component Over Function Component استفاده کنیم؟

همه ما می دانیم که دو نوع کامپوننت در React وجود دارد.

1. اجزای کلاس
2. اجزای تابع

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

توانایی به اشتراک گذاری منطق حالتی مستقل از منطق رندر رابط کاربری باعث محبوبیت مولفه های تابع در بین توسعه دهندگان React شد. با کامپوننت‌های تابع، می‌توانیم تقریباً هر کاری که ممکن است با اجزای کلاس انجام دهیم.

پس چرا ReactJS هنوز اجزای کلاس دارد؟
علیرغم داشتن بسیاری از ویژگی های مفید در کامپوننت های تابع، مواردی وجود دارد که در آنها باید از کامپوننت کلاس به جای مولفه Function استفاده کنیم:

1. مرز خطا

معمولاً وقتی خطایی رخ می‌دهد، درخت مؤلفه‌ای را نمایش می‌دهد که روی صفحه از کار افتاده است، می‌تواند تأثیر بدی روی کاربر نهایی بگذارد.

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

ما می توانیم از مرزهای خطا برای ردیابی خطاهای سمت سرویس گیرنده استفاده کنیم و اطلاعات مفیدی برای اشکال زدایی ارائه کنیم.
امکان ایجاد مرز خطا با یک جزء تابع وجود ندارد.

مرزهای خطا فقط با اجزای کلاس قابل پیاده سازی هستند.

2. جزء خالص

در بسیاری از مواقع، ما باید از رندر مجدد غیرضروری اجزاء بسته به معیارهای خاصی اجتناب کنیم.

در چنین مواردی، ما می‌توانیم از کامپوننت‌های خالص با گسترش React.PureComponent استفاده کنیم، زیرا آنها یک روش ثابت “shouldComponentUpdate” دارند که تصمیم می‌گیرد بر اساس ویژگی‌ها و حالت کامپوننت، دوباره رندر شود یا نه.

بسیاری از اوقات توسعه دهندگان react js از قلاب “useMemo” استفاده می کنند تا از رندر مجدد غیر ضروری مانند این جلوگیری کنند:

   const App=()=>{

                return useMemo(()=>{
                    return <>{/*Code*/}</>
                  },[dependancies])
              }

با این حال، همه چیز قبل از قلاب “useMemo” همچنان اجرا می شود زمانی که جزء حالت خود را به روز می کند. بنابراین، “useMemo” ممکن است همیشه بهترین گزینه برای جلوگیری از رندر مجدد غیر ضروری نباشد.

از آنجایی که نمی‌توانیم کامپوننت‌های خالص را با اجزای تابع ایجاد کنیم، باید از اجزای کلاس استفاده کنیم.

3. روش های چرخه زندگی

می دانم که نباید اینطور باشد، زیرا اکثر روش های چرخه حیات مانند componentDidMount، componentDidUpdate یا componentWillUnmount را می توان با useEffect جایگزین کرد.

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

آدم باید خیلی مراقب وابستگی باشد. و مطمئن شوید که وابستگی از داخل قلاب به روز نمی شود (این می تواند منجر به یک حلقه بی نهایت شود)

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