Jetpack Compose Yaşam Döngüsü | Kotlin Android Geliştirme #4

4 min readMar 23, 2024

Composition uygulamanızın kullanıcı arayüzünü tanımlar ve composable fonksiyonlarıyla üretilir. Bir Composition, kullanıcı arayüzünüzü tanımlayan composable yapıların bir ağaç yapısıdır.

Jetpack Compose, composable ilk kez çalıştırdığında, ilk bileştirme sırasında, kullanıcı arayüzünüzü bir Composition içinde tanımlamak için çağırdığınız bileştirilebilirlerin kaydını tutacaktır. Ardından, uygulamanızın durumu değiştiğinde, Jetpack Compose bir yeniden kompozisyon planlar. Recomposition, Jetpack Compose’un durum değişikliklerine yanıt olarak değişmiş olabilecek bileştirilebilirleri yeniden yürütmesi ve ardından Kompozisyonu değişiklikleri yansıtacak şekilde güncellemesidir.

Composition yalnızca bir ilk bileşim tarafından üretilebilir ve yeniden birleştirme ile güncellenebilir. Bir Bileşimi değiştirmenin tek yolu yeniden birleştirme yapmaktır.

Kompozisyondaki bir composable’ın yaşam döngüsü. Bileşime girer, 0 veya daha fazla kez yeniden bileşime girer ve Bileşimi terk eder.

Yeniden birleştirme tipik olarak bir State nesnesindeki bir değişiklikle tetiklenir. Compose bunları izler ve Composition’da söz konusu State nesnesini okuyan tüm composable’ları ve atlanamayacak şekilde çağırdıkları tüm composable’ları çalıştırır.

Temel Yaşam Döngüsü Örneği

Bir composable birden çok kez çağrılırsa, Composition birden çok örnek yerleştirilir. Her çağrının Composition içinde kendi yaşam döngüsü vardır.

@Composable
fun MyComposable() {
    Column {
        Text("Hello")
        Text("World")
    }
}

“composable” Anatomisi

Composition’da bir composable örneği, çağrı bölgesi tarafından tanımlanır. Compose derleyicisi her çağrı bölgesini farklı olarak değerlendirir. Birden fazla çağrı bölgesinden composable’ların çağrılması, Composition’da composable’ın birden fazla örneğini oluşturacaktır.

Aşağıdaki örneği ele alalım:

@Composable
fun LoginScreen(showError: Boolean) {
    if (showError) {
        LoginError()
    }
    LoginInput() // This call site affects where LoginInput is placed in Composition
}

@Composable
fun LoginInput() { /* ... */ }

@Composable
fun LoginError() { /* ... */ }

Add Extra in Recomposition

Bir composable’ın birden çok kez çağrılması, onu Composition’a da birden çok kez ekleyecektir. Aynı çağrı bölgesinden bir composable birden çok kez çağrıldığında, Compose o composable’a yapılan her çağrıyı benzersiz bir şekilde tanımlamak için herhangi bir bilgiye sahip değildir, bu nedenle örnekleri farklı tutmak için çağrı bölgesine ek olarak yürütme sırası kullanılır. Bu davranış bazen gerekli olan tek şeydir, ancak bazı durumlarda istenmeyen davranışlara neden olabilir.

@Composable
fun MoviesScreen(movies: List<Movie>) {
    Column {
        for (movie in movies) {
            // MovieOverview composables are placed in Composition given its
            // index position in the for loop
            MovieOverview(movie)
        }
    }
}

Yukarıdaki örnekte Compose, örneği Kompozisyon içinde farklı tutmak için çağrı yerine ek olarak yürütme sırasını kullanır. Listenin en altına yeni bir film eklenirse, Compose, listedeki konumları değişmediğinden ve bu nedenle film girişi bu örnekler için aynı olduğundan, Kompozisyonda zaten bulunan örnekleri yeniden kullanabilir.

Bununla birlikte, film listesi listenin üstüne veya ortasına ekleme, öğeleri kaldırma veya yeniden sıralama yoluyla değişirse, girdi parametresi listedeki konumu değişen tüm MovieOverview çağrılarında yeniden bileşime neden olur. Örneğin, MovieOverview bir yan efekt kullanarak bir film görüntüsü getiriyorsa bu son derece önemlidir. Efekt devam ederken yeniden birleştirme gerçekleşirse, iptal edilecek ve yeniden başlayacaktır.

@Composable
fun MovieOverview(movie: Movie) {
    Column {
        // Side effect explained later in the docs. If MovieOverview
        // recomposes, while fetching the image is in progress,
        // it is cancelled and restarted.
        val image = loadNetworkImage(movie.url)
        MovieHeader(image)
        /* ... */
    }
}

İdeal olarak, MovieOverview örneğinin kimliğinin kendisine aktarılan filmin kimliğine bağlı olduğunu düşünmek isteriz. Film listesini yeniden sıralarsak, ideal olarak her MovieOverview örneğini farklı bir film örneğiyle yeniden oluşturmak yerine Kompozisyon ağacındaki örnekleri de benzer şekilde yeniden sıralarız. Compose, çalışma zamanına ağacın belirli bir bölümünü tanımlamak için hangi değerleri kullanmak istediğinizi söylemeniz için bir yol sağlar: anahtar composable.

Bir kod bloğunu, bir veya daha fazla değerin aktarıldığı bir anahtar oluşturulabilir çağrısı ile sardığınızda, bu değerler bileşimdeki o örneği tanımlamak için kullanılmak üzere birleştirilecektir. Bir anahtarın değerinin global olarak benzersiz olması gerekmez, yalnızca çağrı alanındaki bileştirilebilirlerin çağrıları arasında benzersiz olması gerekir. Yani bu örnekte, her filmin filmler arasında benzersiz olan bir anahtara sahip olması gerekir; bu anahtarı uygulamanın başka bir yerindeki başka bir composable ile paylaşması sorun değildir.

@Composable
fun MoviesScreenWithKey(movies: List<Movie>) {
    Column {
        for (movie in movies) {
            key(movie.id) { // Unique ID for this movie
                MovieOverview(movie)
            }
        }
    }
}

Yukarıdakilerle birlikte, listedeki öğeler değişse bile Compose, MovieOverview’a yapılan bireysel çağrıları tanır ve bunları yeniden kullanabilir.

Bazı birleştirilebilirler, birleştirilebilir anahtar için yerleşik desteğe sahiptir. Örneğin, LazyColumn, items DSL’sinde özel bir anahtar belirtilmesini kabul eder.

@Composable
fun MoviesScreenLazy(movies: List<Movie>) {
    LazyColumn {
        items(movies, key = { movie -> movie.id }) { movie ->
            MovieOverview(movie)
        }
    }
}