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 جدید مقایسه میکنه.
آیا Functional Component ها در ری اکت خالص هستن ؟ ( Pure هستن ؟ )
تو ری اکت 2 نوع کامپوننت داریم :
- کامپوننت های کلاسی ( Class Component )
- کامپوننت های تابعی ( Functional Component )
اما بنظر شما Functional Component ها Pure هستن ؟
کامپوننت های تابعی ( Functional Component ) خالص/Pure نیستن و نمیتونن از مزایای Pure Component ها استفاده کنن.
چون اصولا از Pure Component ها میتونیم در Class Component ها بهره ببریم.
برای اینکه یک Functional Component رو به یک PureComponent تبدیل کنیم، باید اونو به Class Component تبدیل کنیم.
مثلا کامپوننت زیر که Functional هست رو :
const App = (count = 0) => {
return (
<div>
<span> {count} </span>
</div>
)
}
به کامپوننت زیر که Class Component هست تبدیل کنیم تا Pure بشه :
class App extends React.PureComponent {
render() {
const { count = 0 } = this.props;
return (
<div>
<span>{ count }</span>
</div>
)
}
}
متد shouldComponentUpdate در ری اکت چیست ؟
قبل از اینکه PureComponent در ری اکت معرفی بشه، ما از متد shouldComponentUpdate در ری اکت استفاده میکردیم تا مشخص کنیم که چه زمانی کامپوننت ما باید re-render بشه.
اما تیم React کامپوننت های خالص ( PureComponent ) رو معرفی کرد تا دیگه نیازی نباشه این مورد رو دستی مدیریت کنیم.
اگه از PureComponent در react استفاده کنیم، کامپوننت ما State و Props خودش رو با مقدار جدیدش مقایسه میکنه و تصمیم میگیره که آیا باید re-render بشه یا خیر.و در نتیجه از re-render اضافی جلوگیری میشه.
بهتره اینطور بگیم که اگر مقدار قبلی State یا Props با مقدار جدید State و Props یکسان باشه، کامپوننت Pure ما re-render نمیشه!
تفاوت Pure Component در ری اکت با کامپوننت معمولی چیست ؟
بطور کل 2 نوع کامپوننت در ری اکت داریم :
کامپوننت های معمولی ( که معمولا ازشون استفاده میکنیم )
کامپوننت های خالص ( Pure Component )
PureComponent در ری اکت یک ویژگی جالب داره. اینکه با هر تغییر Props و State مجدد رندر نمیشه! ابتدا چک میکنه که ببینه آیا Props یا State قبلی با Props یا State جدید تفاوت داره یا خیر ؟ اگر تفاوت داشت کامپوننت ما re-render میشه.
استفاده از PureComponent در ریکت باعث میشه اپیکیشن سریعتر و بهینه تری داشته باشیم.
جمع بندی
توابع خالص ( Pure Function ) توابعی هستن که اگه یک آرگومان ثابت بهش بدیم، همیشه خروجی یکسان برای همون آرگومان بهمون میده.
تو Functional Component ها نمیتونیم از مزایای PureComponent در ریکت بهره مند بشیم. باید حتما تابع خودمون رو به Class Component تبدیل کنیم یا از memo در ری اکت استفاده کنیم.
PureComponent در React با جلوگیری از re-render اضافه باعث بهبود عملکرد اپیکیشن ما میشه.
استفاده از Pure Component در ریکت باعث میشه که با بخش عمده ای از باگ های احتمالی مواجه نشیم.
Pure Component در ریکت هیچ مقداری رو خارج از خود کامپوننت تغییر نمیده. اگر مقدار State یا Props این نوع از کامپوننت ها با مقدار مشابه تغییر کنه، کامپوننت re-render نمیشه ( اما تو کامپوننت های عادی این مسئله باعث re-render شدن کامپوننت میشه)
PureComponent در React با جلوگیری از re-render اضافه باعث بهبود عملکرد اپیکیشن ما میشه.
PureComponent در ریکت چند ویژگی زیر رو داره :
- این کامپوننت ها از re-render اضافی جلوگیری میکنن.
- استفاده از این نوع کامپوننت ها باعث بهبود Performance اپیکیشن ما میشه.
- تو این نوع کامپوننت ها باید shouldComponentUpdate رو بصورت دستی کنترل کرد.
- تو این کامپوننت ها Shallow Comparision برای Props و State ها صورت میگیره.
خیر! PureComponent ها در ری اکت صرفا برای کامپوننت های کلاسی (Class Component) معرفی شدن اما شما میتونید از memo در ری اکت استفاده کنید.
دیدگاهتان را بنویسید