【SwiftUI】onAppear() ・onChange(initial: true) ・task() の実行順序

プロパティをいじるのに便利ですが。

実行の順序ですよ。

これは、予想通りですが。


Text("hello")
  .onAppear { 
    print("Text onAppear") 
  }
  .onChange(of: true, initial: true) { 
    print("Text onChange") 
  }
  .task {
    print("Text task") 
  }

// Text onAppear
// Text onChange
// Text task

記述の順序にかかわらず task() は最後に実行されます。


Text("hello")
  .task { print("Text task") }
  .onAppear { print("Text onAppear") }
  .onChange(of: true, initial: true) { print("Text onChange") }

// Text onAppear
// Text onChange
// Text task

onAppear() と .onChange(initial: true) は記述順。


Text("hello")
  .task { print("Text task") }
  .onChange(of: true, initial: true) { print("Text onChange") }
  .onAppear { print("Text onAppear") }

// Text onChange
// Text onAppear
// Text task

では、View のネスト。


Group {
  VStack {
    Text("hello")
      .task { print("Text task") }
      .onChange(of: true, initial: true) { print("Text onChange") }
      .onAppear { print("Text onAppear") }
  }
  .task { print(" VStack task") }
  .onChange(of: true, initial: true) { print(" VStack onChange") }
  .onAppear { print(" VStack onAppear") }
}
.task { print("Group task") }
.onChange(of: true, initial: true) { print("Group onChange") }
.onAppear { print("Group onAppear") }

// Text onChange
// Text onAppear
// VStack onChange
// VStack onAppear
// Group onChange
// Group onAppear
// Text task
// VStack task
// Group task

task() は 最上位の View の表示後にまとめて実行されることに驚きです。

 

■ まとめ


- ネストの深いものから順番に実行される。
- onAppear(), onChange(initial: true) は記述順に実行される。
- task() は最上位 View の表示後にまとめて実行される。

結構、手が止まるんですよね、ここらへん。


【SwiftUI】 onChange() の 書き方

iOS17でクロージャ引数が1つのものは Deprecated と警告が出たりするので、


👉 onChange(of:perform:) | Apple Developer Documentation hatena-bookmark

こんなかんじで書いてました。


Text("\(count)")
  .onChange(of: token) { _, newValue in
    // do something ...
  }

クソですね !

 

■ クロージャの引数

クロージャの引数なしと2つのものがあるんですね !


func onChange<V>(
    of value: V,
    initial: Bool = false,
    _ action: @escaping () -> Void
) -> some View where V : Equatable

👉 onChange(of:initial:_:) | Apple Developer Documentation hatena-bookmark


func onChange<V>(
    of value: V,
    initial: Bool = false,
    _ action: @escaping (V, V) -> Void
) -> some View where V : Equatable

👉 onChange(of:initial:_:) | Apple Developer Documentation hatena-bookmark

よって、引数なしのほうを使って、

フツーに以下のように書けば良かったのか。


Text("\(count)")
  .onChange(of: token) {
    print("\(token)")
  }

なるほど。

IDE の選択肢の一番上をなんとなく選択してたのだろうと思います。

きちんと、ドキュメントを見ることって大事。

考えてみると、引数2つの記述


Text("\(count)")
  .onChange(of: token) { oldValue, newValue in
    // do something ...
  }

は、oldValue が必要でない限り使う必要がないな。


【SwiftUI】task の id を使って処理を何度も繰り返す

この id を書き換えることで task のクロージャ内の処理を繰り返すことができるんですね !

onAppear と同様に初回だけだと思ってましたわ。


func task<T>(
    id value: T,
    priority: TaskPriority = .userInitiated,
    _ action: @escaping () async -> Void
) -> some View where T : Equatable

id
The value to observe for changes. The value must conform to the Equatable protocol.

👉 task(id:priority:_:) | Apple Developer Documentation hatena-bookmark

 

■ やってみる

公開されている無料現在時刻取得のAPIを使います。


# curl "http://worldtimeapi.org/api/timezone/Asia/Tokyo"

{
  "abbreviation": "JST",
  "client_ip": "2675:6780:4e0:3200:a181:c317:3902:c121",
  "datetime": "2024-03-26T22:10:13.824894+09:00",
  "day_of_week": 2,
  "day_of_year": 86,
  "dst": false,
  "dst_from": null,
  "dst_offset": 0,
  "dst_until": null,
  "raw_offset": 32400,
  "timezone": "Asia/Tokyo",
  "unixtime": 1711458613,
  "utc_datetime": "2024-03-26T13:10:13.824894+00:00",
  "utc_offset": "+09:00",
  "week_number": 13
}

👉 World Time API: Simple JSON/plain-text API to obtain the current time in, and related data about, a timezone. hatena-bookmark

クライアント側はシンプルな実装にしておきます。


let url = URL(string: "https://worldtimeapi.org/api/timezone/Asia/Tokyo.txt")!
var lines: [String] = []
for try await line in url.lines {
  lines.append(line)
}
print(String(lines[2].components(separatedBy: "T")[1]))

// 22:10:13.824894+09:00

👉 【SwiftUI】シンプルに HTTPリクエスト でお天気情報取得 hatena-bookmark

task (id:) を使っておいて、ボタンで id を更新させます。

 

■ まとめ

「id」って便利な使えるやつなんですね !

👉 【SwiftUI】View の 強制再描画 hatena-bookmark