PureComponent در ری اکت چیست ؟ pure component چیست ؟

در واقع Pure Component در ری اکت دقیقا مثل Pure Function در برنامه نویسی یک مفهوم بشدت مهم و کاربردی هست که برنامه نویس ها و توسعه دهنده ها باید درک صحیح و عمیقی ازش داشته باشن !! ما به عنوان یک توسعه دهنده ریکت، باید بدونیم که PureComponent در ریکت چیکار میکنه و چه مزایایی برای ما داره.در حقیقت Pure Component در ری اکت باعث میشه که اپیکیشن بهینه تری داشته باشیم و با طیف گسترده ای از مشکلات و باگ ها سروکار نداشته باشیم!داستان نیاز به Pure Component چیه ؟!تو ری اکت به هرتیکه کد که یک وظیفه مشخص داره کامپوننت میگیم. بطور مثال هدر ، فوتر ، دکمه ، جدول و .. هرکدوم یک کامپوننت جدا از هم هستن و هرکدوم وظیفه نمایش یک UI و مدیریت Logic خودشون رو دارن.تو React ، درصورتی یک کامپوننت re-render میشه که یکی از 2 اتفاق زیر بیوفته :Props کامپوننت ما تغییر کنه.State کامپوننت ما تغییر کنه.این موضوع کاملا منطقیه چون واقعا ما نیاز داریم که با تغییر Props و State ، کامپوننت ما re-render بشه تا کاربر بتونه نسخه آپدیت شده صفحه رو مشاهده کنه.اما گاهی اوغات State یا Props کامپوننت ما تغییری نکرده اما کامپوننت ما re-render میشه!اگر State کامپوننت ما تغییر کنه، تمامی کامپوننت هایی که فرزند این کامپوننت هستن هم re-render میشن اما خب شاید ما به این re-render شدن تمامی کامپوننت ها نیاز نداشته باشیم!این یک re-render غیرضروریه و با جلوگیری از این re-render اضافی میتونیم اپیکیشن بهینه تری داشته باشیم.همچنین اگر State و Props کامپوننت های ما با مقادیر مشابه خودشون بروزرسانی بشن، کامپوننت ما re-render میشه! که این اتفاق اصلا خوب نیست و نباید اتفاق بیوفته. چرا که کامپوننت ما فقط درصورت تغییر State یا Props با مقادیر جدید باید re-render بشه.برای اینکه جلوی این re-render اضافی رو بگیریم و اپیکیشن خودمون رو بهینه تر کنیم باید از Pure Component استفاده میکنیم.کامپوننت خالص یا Pure Component در ری اکت چیست ؟قبل از اینکه ببینیم Pure Component در ریکت چیه ، باید ببینیم مفهوم Pure Function چیه ؟درواقع توابع خالص ( Pure Function ) توابعی هستن که 2 خصوصیت زیر رو داشته باشن :اگه همیشه بهشون یک آرگومان مشخص بدیم، همیشه یک خروجی مشخص بهمون میدن!هیچ Side Effect ندارن. هیچ تغییری در هیچ متغیری بیرون از اسکوپ تابع ایجاد نمیکنن.برای اینکه بهتر Pure Function رو درک کنیم، تابع زیر ببینید :const Sum = (a,b) => a+b;اگه به تابع بالا همیشه مقدار 1 و 2 رو به عنوان آرگومان ورودی بدیم، همیشه خروجی 3 رو بهمون برمیگردونه.همچنین این تابع هیچ اثر خارجی ( Side Effect ) نداره و هیچ تغییری در متغیر های بیرون اسکوپ خودش ایجاد نمیکنه.پس تابع بالا یک Pure Function هست!حالا بریم یک مثال نقض هم ببنیم. ( یک تابع که Pure نیست )به توابعی که Pure Function نیستن، impure Function میگیم :var number = 0; function Sum(num){ return number+=num; } console.log(Sum(10)) // output => 10 console.log(Sum(10)) // output => 20تابع بالا یک Impure Function هست ( Pure Function نیست )چون درصورتیکه یک ورودی یکسان بهش بدیم، خروجی های متفاوتی به ما میده.همچنین این تابع یک Side Effect ( اثر خارجی ) داره. چون متغیر number در خط 1 رو داره تغییر میده.تا به اینجای کار باید مفهوم Pure Function رو متوجه شده باشیم. حالا بریم ببینیم که Pure Component در React چیست ؟کامپوننت خالص / Pure Component در ری اکت چیست ؟کامپوننت خالص Pure Component در ریکت مفهوم خیلی مشابهی به Pure Function داره.کامپوننت خالص Pure Component در ریکت هیچ مقداری رو خارج از خود کامپوننت تغییر نمیده. اگر مقدار State یا Props این نوع از کامپوننت ها با مقدار مشابه تغییر کنه، کامپوننت re-render نمیشه ( اما تو کامپوننت های عادی این مسئله باعث re-render شدن کامپوننت میشه)پس اگه در کامپوننت های خالص ( Pure Component ) تغییر State یا Props داشته باشیم که مقدار قبل تغییر با بعد تغییر یکسان باشه، Pure Component ما re-render نمیشه !!و همین موضوع باعث بهینه تر شدن اپیکیشن ما میشه.یعنی اگه مقدار State ما 1 باشه و این State به مقدار 1 آپدیت بشه، Pure Component ما re-render نمیشه. درصورتیکه کامپوننت های معمولی در ری اکت re-render میشن.کامپوننت خالص / PureComponent در ری اکت چه ویژگی داره ؟کامپوننت خالص PureComponent در ریکت چند ویژگی زیر رو داره :این کامپوننت ها از re-render اضافی جلوگیری میکنن.استفاده از این نوع کامپوننت ها باعث بهبود Performance اپیکیشن ما میشه.تو این نوع کامپوننت ها باید shouldComponentUpdate رو بصورت دستی کنترل کرد.تو این کامپوننت ها Shallow Comparision برای Props و State ها صورت میگیره.کامپوننت زیر یک PureComponent در ریکت هست :import React from 'react';class App extends React.PureComponent { render() { const { counter = 0 } = this.props; return ( <div> <span>{ counter }</span> </div> ) }}export default App;کامپوننت بالا یک Pure Component در ری اکت هست چون هیچ تغییری در Props دریافتی اعمال نمیکنه و همون رو به کاربر نشون میده.به کامپوننت بالا اگه همیشه یک Props یکسان بدیم، همیشه خروجی یکسان دریافت میکنیم.کامپوننت خالص / Pure Component در react چطور کار میکنه ؟ما برای اینکه تصمیم بگیریم که کامپوننت ما باید re-render بشه یا نه میتونیم از متد shouldComponentUpdate در ری اکت استفاده کنیم اما خود ری اکت Pure Component رو در اختیار ما گذاشته !پس دیگه نیازی به shouldComponentUpdate نداریم.کامپوننت خالص در ری اکت ( Pure Component ) برای اینکه تصمیم بگیره که re-render بشه یا نشه، State و Props خودش رو با State و Props جدید مقایسه میکنه.تفاوت Pure Component در ری اکت با کامپوننت معمولی چیست ؟ادامه این مقاله رو داخل pureComponent در ری اکت منتشر کردیم. لطفا با کلیک روی این لینک هم از ما در فِرانت اِندی حمایت کنید هم مابقی مقاله + تصاویر و تیکه کد های کامل رو مشاهده کنید. .