![]() |
تحسين أداء تطبيقاتك بـ LaunchedEffect و SideEffect |
أسرار تحسين أداء تطبيقاتك باستخدام LaunchedEffect و SideEffect
في عالم تطوير البرمجيات ، خاصة مع تطور تطبيقات الاندرويد والأطر مثل Kotlin Compose، أصبح فهم كيفية التعامل مع الآثار الجانبية أمرًا ضروريًا لأي مطور يريد إنشاء تطبيقات فعالة ومستقرة. يلعب مديرو التأثيرات (LaunchedEffect) دورًا مركزيًا في التحكم في هذه الآثار الجانبية، مما يتيح بضبط أفضل وأداء أعلى.للتطبيقات. في هذه المقالة، سنبحر معكم في مدير التأثيرات في Kotlin Compose، مع التركيز على كيفية استخدامها وأهميتها وأنماط استخدامها المختلفة.
ما هي معالجات التأثير في Kotlin Compose؟
معالجات التأثير في Kotlin Compose هي أدوات تُستخدم للتعامل مع العمليات الثانوية التي تقع خارج نطاق واجهة المستخدم. وتشمل هذه من المكون. الثانوية مثل طلبات الشبكة وقراءة البيانات وكتابتها ومعالجة الملفات وتسمى أيضًا واجهات البرمجة. تحدث هذه التأثيرات بشكل غير متزامن ويتم التحكم فيهاخارج السياق الرئيسي للمركبات ( يمكنك الوصول اليها من خارج التصميم ).
مفهوم Effect Handlers في Kotlin Compose
في إطار عمل Kotlin Compose، تعد العمليات الجانبية جزءًا من إنشاء التطبيقات التفاعلية. قد تشمل العمليات الثانوية ما يلي:
- استدعاء API: الحصول على البيانات من الخادم.تفاعل النظام: مثل طلبات الأذونات.
- التخزين المحلي: كتابة وقراءة البيانات من الذاكرة المحلية.
- التوقيت: استخدم المؤقتات أو المهام المؤقتة.
لماذا نحتاج إلى مدير التأثير (LaunchedEffect) في تطبيقاتنا ؟
تسمح لك معالجات التأثير في Kotlin Compose بفصل التأثيرات الجانبية عن منطق واجهة المستخدم الرئيسي. يتيح لك ذلك إنشاء تطبيقات مرنة وقابلة للصيانة وأكثر كفاءة. يعتمد Kotlin Compose على دورة حياته التي تسمح بإعادة تركيب المكونات عدة مرات، ومن هنا تأتي الحاجة إلى استخدام مديري التأثير لضمان تنفيذالآثار الجانبية في الوقت المناسب ووفقا لشروط التطبيق.
اقسام SideEffect
Suspended :
- LaunchedEffect
- rememberCoroutineScope
Non-suspended :
- DisposableEffect
- SideEffect
التأثيرات في Kotlin Compose LaunchedEffect
@Composable
fun MyComposable(data: String) {
LaunchedEffect(data) {
// يقوم بتنفيذ العملية الجانبية مرة واحدة أو عند تغير data
fetchDataFromApi(data)
}
Text("Data: $data")
}
@Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}
}
@Composable
fun MyComposable() {
val scope = rememberCoroutineScope()
Button(onClick = {
scope.launch {
// تشغيل عملية غير متزامنة
delay(1000)
println("Button clicked after delay")
}
}) {
Text("Click Me")
}
}
@Composable
fun MyDisposableEffect() {
DisposableEffect(Unit) {
// تنفيذ التأثير الجانبي
println("Effect started")
onDispose {
// تنظيف العملية عند إزالة المكون
println("Effect ended")
}
}
Text("DisposableEffect Example")
}
متى نستخدم DisposableEffect ؟
@Composable
fun DataFetcherScreen() {
var data by remember { mutableStateOf("Loading...") }
val scope = rememberCoroutineScope()
LaunchedEffect(Unit) {
try {
data = fetchDataFromApi()
} catch (e: Exception) {
data = "Error loading data"
}
}
DisposableEffect(Unit) {
onDispose {
println("Screen disposed")
}
}
Column {
Text("Data: $data")
Button(onClick = {
scope.launch {
data = "Loading..."
data = fetchDataFromApi()
}
}) {
Text("Refresh Data")
}
}
}
suspend fun fetchDataFromApi(): String {
delay(1000) // محاكاة التأخير
return "Data loaded from API"
}
شرح انواع LaunchedEffect مع مثال لكل نوع منهم
🔥ما هو SideEffect في Jetpack Compose؟
@Composable
fun SideEffectExample() {
var count by remember { mutableStateOf(0) }
SideEffect {
Log.d("SideEffect", "القيمة الحالية لـ count: $count")
}
Button(onClick = { count++ }) {
Text("زيادة العدد")
}
}
🤔 ما هو LaunchedEffect ولماذا نحتاجه؟
@Composable
fun LaunchedEffectExample() {
var text by remember { mutableStateOf("مرحبا بك!") }
LaunchedEffect(Unit) {
delay(3000)
text = "تم تحديث النص بعد 3 ثواني!"
}
Text(text = text)
}
👌 متى نستخدم rememberCoroutineScope؟
@Composable
fun RememberCoroutineScopeExample() {
val scope = rememberCoroutineScope()
var text by remember { mutableStateOf("اضغط لبدء التحميل") }
Button(onClick = {
scope.launch {
text = "جار التحميل..."
delay(3000)
text = "تم التحميل بنجاح!"
}
}) {
Text(text = text)
}
}
🙏 متى نستخدم DisposableEffect ؟
@Composable
fun CompassScreen(sensorManager: SensorManager) {
val sensor = remember { sensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION) }
val sensorEventListener = remember {
object : SensorEventListener {
override fun onSensorChanged(event: SensorEvent?) {
event?.let {
// تلتزمُ يتعرض هنا البيانات المستخدم
println("تأوية اليومًلة: ${event.values[0]}")
}
}
override fun onAccuracyChanged(sensor: Sensor?, accuracy: Int) {}
}
}
DisposableEffect(sensor) {
// الكيميوليا يتصل أول مرة. فبدأ تستمع الحساس لا
sensorManager.registerListener(sensorEventListener, sensor, SensorManager.SENSOR_DELAY_UI)
onDispose {
// "ده مستندًا لنا الكيميوليا بخرج أو لو حصل تغيير في" sensor"
sensorManager.unregisterListener(sensorEventListener)
println("إيقاف الحساس")
}
}
// راجعة المستخدم
Text(text = "الشاشة يتعرض بيانات اليومًلة")
}