در واقع Pure Component در ری اکت دقیقا مثل Pure Function در برنامه نویسی یک مفهوم بشدت مهم و کاربردی هست که برنامه نویس ها و توسعه دهنده ها باید درک صحیح و عمیقی ازش داشته باشن !! ما به عنوان یک توسعه دهنده ریکت، باید بدونیم که PureComponent در ریکت چیکار میکنه و چه مزایایی برای ما داره.
در حقیقت Pure Component در ری اکت باعث میشه که اپیکیشن بهینه تری داشته باشیم و با طیف گسترده ای از مشکلات و باگ ها سروکار نداشته باشیم!
تو ری اکت به هرتیکه کد که یک وظیفه مشخص داره کامپوننت میگیم. بطور مثال هدر ، فوتر ، دکمه ، جدول و .. هرکدوم یک کامپوننت جدا از هم هستن و هرکدوم وظیفه نمایش یک UI و مدیریت Logic خودشون رو دارن.
تو React ، درصورتی یک کامپوننت re-render میشه که یکی از 2 اتفاق زیر بیوفته :
این موضوع کاملا منطقیه چون واقعا ما نیاز داریم که با تغییر 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 Function چیه ؟
درواقع توابع خالص ( Pure Function ) توابعی هستن که 2 خصوصیت زیر رو داشته باشن :
برای اینکه بهتر 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 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 در ریکت هست :
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 یکسان بدیم، همیشه خروجی یکسان دریافت میکنیم.
ما برای اینکه تصمیم بگیریم که کامپوننت ما باید re-render بشه یا نه میتونیم از متد shouldComponentUpdate در ری اکت استفاده کنیم اما خود ری اکت Pure Component رو در اختیار ما گذاشته !
پس دیگه نیازی به shouldComponentUpdate نداریم.
کامپوننت خالص در ری اکت ( Pure Component ) برای اینکه تصمیم بگیره که re-render بشه یا نشه، State و Props خودش رو با State و Props جدید مقایسه میکنه.
ادامه این مقاله رو داخل pureComponent در ری اکت منتشر کردیم. لطفا با کلیک روی این لینک هم از ما در فِرانت اِندی حمایت کنید هم مابقی مقاله + تصاویر و تیکه کد های کامل رو مشاهده کنید. .
