بررسی recomposition و remember در jetpack compose

مدتی است که کتابخانه جذاب compose به اندروید اضافه شده تا روند برنامه نویسی UI را ساده و سریع تر کند.

کامپوز در واقع سلسله مراتبی از فانکشن هاست که هر کدام از فانکشن ها یک قسمت از UI را ایجاد می کند.

برای نمونه قطعه کد زیر متنی را به کاربر نمایش می دهد.

همانطور که می بینید تابع Text درون تابع Greeting فراخوانی شده و متن بالا را نشان می دهد.

هر تابع برای اینکه بتواند یک تابع کامپوز را درون خود اضافه کند می بایست انوتیشن Composable را به خود اضافه کند. که در تابع بالا نمونه آن را می بینید که با علامت @ شروع شده است.

عبارت Preview ،همانطور که از نامش پیداست ، در صورت اضافه شدن، پیش نمایشی از تابع را نشان خواهد داد.

برای نمونه دیگر به قطعه کد زیر توجه کنید.

در اینجا تابعی به نام Counter نوشته شده و تابع Button و متغیر counter درون آن قرار دارد.

زمانی که دکمه توسط کاربر کلیک شود مقدار متغیر افزایش می یابد.

همچنین تابع Text نیز به Button اضافه شده و مقدار counter را نمایش می دهد.

اما مساله ای وجود دارد. وقتی دکمه کلیک می شود ، Text مقدار متغیر counter را نمایش نمی دهد.

دوباره نویسی یا Recomposition :

دوباره نویسی یا Recomposition در کامپوز به وضعیتی که گفته می شود که یک یا چند تابع کامپوز دوباره اجرا شوند.

این اتفاق زمانی رخ می دهد که یک تابع کامپوز با مقدار جدید فراخوانی شود.

و این فراخوانی زمانی ممکن می شود که دیتای مورد نظر درون mutableState قرار بگیرد و متغیر value کلاس State با مقدار جدیدی آپدیت شود.

برای نمونه ،در کد قبلی، مقدار counter باید در متغیر value کلاس State قرار بگیرد. حالا تغییر در value کلاس State باعث recomposition می شود. یعنی تابع Text دوباره اجرا شده و مقدار جدید را نشان می دهد.

همانطور که در عکس بالا می بینید ،حالا مقدار value تغییر کرده و باعث دوباره نویسی تابع Text با مقدار جدید شده است.

نکته : اگر مقدار متغییر value را با مقدار جدیدی ست کنید تنها توابع کامپوزیبلی که از آن استفاده می کنند آپدیت می شوند.

همچنین اگر مقدار value با مقدار مشابه قبلی ست شود ، هیچ دوباره نویسی ای اتفاق نمی افتد.

تابع remember :

همانطور که در کد بالا دیدید متغیر state در خارج تابع Counter قرار دارد، اگر آن را درون تابع قرار دهیم چه اتفاقی می افتد؟

در کد بالا همه چیز مانند قبل کار خواهد کرد و به ظاهر مشکلی در این کد وجود ندارد اما اگر همین کد را با اندک تغییری به شکل زیر بنویسیم ، یک باگ نمایان خواهد شد.

در این حالت زمانی که کاربر برروی دکمه کلیک کند ، مقدار value متغیر state با یک جمع می شود اما بخاطر اینکه یک بار دیگر تابع در این قسمت اجرا شده متغییر state دوباره ایجاد شده است.

• اینجا جایی است که باید از remember استفاده کنیم. اما قبل از اینکه با remember آشنا بشویم بهتر است بگویم که در کد قبل تر به این علت که متغییر state در بدنه تابع Counter استفاده نشده ،یعنی مقدار آن با مقدار 1 جمع نشده بود، این تابع از نو اجرا نشده و state دوباره مقدار دهی نشده بود.

حالا کد قبل را با تابع remember اجرا می کنیم:

همانطور که از تصویر می بینید مقدار state در دفعات بعد composition از نو ایجاد نمی شود. این به این خاطر است که mutableStateOf درون تابع remember ایجاد شده است و در صورت composition های مجدد مقدار آن حفظ خواهد شد.

لطفا با لایک و کامنت هایتان از نگارش پست های بیشتر حمایت کنید.