На прошлой неделе я увидел, что сообщество пытается перенести наработаные шаблоны разработки c UIKit в SwiftUI. Но я уверен, что лучший способ написать эффективный код используя SwiftUI — это забыть все об UIKit и полностью изменить свое мышление с точки зрения разработки пользовательского интерфейса. На этой неделе я расскажу основные отличия между разработкой используя UIKit и SwiftUI.
Определение различий
UIKit — это императивный управляемый событиями фреймворк для создания пользовательских интерфейсов для платформы iOS. Это означает, что вы должны обрабатывать все изменения состояния во время таких событий, как загрузка представления, нажатие кнопки и т. д. Большим недостатком этого подхода является сложность синхронизации пользовательского интерфейса с его состоянием. Как только состояние изменяется, необходимо вручную добавить/удалить/показать/скрыть представления и синхронизировать его с текущим состоянием приложения.
SwiftUI — это декларативный фреймворк для создания пользовательских интерфейсов для всех платформ компании Apple. Ключевое слово в данном случае является декларативным. Декларативный означает, что разработчику нужно объявить, чего он хочет достичь, и фреймворк позаботится об этом. Фреймворк знает лучший способ визуализации пользовательского интерфейса.
UI = f(state)
В SwiftUI пользовательский интерфейс является функцией его состояния. Это означает, что всякий раз, когда состояние представления изменяется, оно пересчитывает свое body property и генерирует новое представление. Рассмотрим ниже приведенный пример.
struct ContentView: View {
@ObservedObject var store: Store
var body: some View {
Group {
if store.isLoading {
Text("Loading...")
.font(.subheadline)
} else {
Image("photo")
.font(.largeTitle)
}
}
}
}
В выше приведенном примере имеется представление, которое отображает текст «Loading...» и по окончанию загрузки отобразит изображения. ObserverObject — это состояние данного представления, и, как только оно изменяется, SwiftUI повторно вычисляет свойство body и назначает новое представление. В процессе разработки с использованием UIKit необходимо вручную скрывать/отображать элементы иерархии представления, но в SwiftUI нет необходимости добавлять/удалять индикатор загрузки. В SwiftUI имеется несколько способов описать состояние представления, чтобы узнать о них больше, взгляните на “Property Wrappers в SwiftUI”.
Теперь более подробно рассмотрим, что же происходит при изменении состояния представления. SwiftUI имеет оттиск текущей иерархии представлений и, как только изменяется ее состояние, он вычисляет новое представление. SwiftUI применяет алгоритмы сравнения, чтобы понимать различия и автоматически добавлять/удалять/обновлять необходимые представления. По умолчанию SwiftUI использует стандартный in/out transition изображения для отображения / скрытия представлений, но также имеется возможность вручную изменить transition на любую другую анимацию. Чтобы узнать больше о transition и анимации в SwiftUI, взгляните на мою статью «Анимации в SwiftUI».
Иерархия представления
Давайте сейчас поговорим об иерархии представлений и о том, как на самом деле SwiftUI отображает структуру представлений. Самое первое, о чем я хочу упомянуть, это то, что SwiftUI не отображает структуру представления путем сопоставления «один к одному». Имеется возможность использовать столько контейнеров представления, сколько пожелаете, но в итоге SwiftUI отображает только те представления, которые имеют смысл для отрисовки. Это означает то, что можно извлекать их логику в небольшие представления, а затем составлять и повторно использовать их в приложении. Не стоит волноваться, производительность приложения в данном случае не пострадает. Чтобы узнать больше о создании представлений в SwiftUI, взгляните на данную статью.
Лучший способ понять иерархию сложных представлений в SwiftUI — это отобразить ее тип. SwiftUI использует статическую систему типов, чтобы определять различие достаточно быстро. Прежде всего, он проверяет тип представления, а затем проверяет значения компонентов представления. Я не фанат использования reflections в рабочем коде, но это очень полезно в процессе обучения.
print(Mirror(reflecting: ContentView(store: .init()).body))
// Group<_ConditionalContent<Text, ModifiedContent<Image, _EnvironmentKe
Используя структуру Mirror, можно отобразить реальный тип ContentView body и узнать, как работает SwiftUI.
Выводы
На этой неделе мы узнали основное различие между UIKit и SwiftUI и подробно рассмотрели алгоритм сравнения в SwiftUI. Я надеюсь, вам понравилась статья. Спасибо за прочтение и до встречи на следующей неделе!
