Hello
29 |React is awesome!
30 |Hello, {name}!
; 62 | }; 63 | 64 | In SwiftUI: 65 | 66 | .. code-block:: swift 67 | 68 | struct Hello: View { 69 | let name: String 70 | 71 | var body: some View { 72 | Text("Hello, \(name)!") 73 | } 74 | } 75 | 76 | Almost the same in semantic! 77 | 78 | Conditional & List 79 | ------------------ 80 | Structure of the contents can be dynamic, the most common patterns are conditional 81 | and list. 82 | 83 | In React: 84 | 85 | .. code-block:: javascript 86 | 87 | const UserList = ({ users }) => { 88 | if (!users.length) { 89 | returnNo users
; 90 | } 91 | 92 | return ( 93 |{counter}
185 | 186 |{greeting}, {name}!
; 247 | }; 248 | 249 | In SwiftUI: 250 | 251 | .. code-block:: swift 252 | 253 | func uniqueId() -> some Equatable { 254 | return UUID().uuidString // Maybe not so unique? 255 | } 256 | 257 | struct Hello: View { 258 | let greeting: String 259 | let name: String 260 | 261 | var body: some View { 262 | Text("\(greeting), \(name)!") 263 | .onChange(of: name) { name in 264 | print("Hey, \(name)!") 265 | } 266 | .onChange(of: uniqueId()) { _ in 267 | print("Something changed!") 268 | } 269 | } 270 | } 271 | 272 | In SwiftUI, we have neither hook functions nor lifecycle functions, but we have 273 | modifiers! Every view type has a lot of modifier functions attached to it. 274 | 275 | ``onChange`` behaves just like ``useEffect``, the ``action`` closure is called 276 | every time the ``value`` changes and the first time the receiver view renders. 277 | But we must pass a value, if you need perform something whenever something 278 | changed, you can use a trick: 279 | 280 | Create a function that returns an unique object every time it gets called. You can 281 | use **UUID**, global incrementing integer and even timestamps! 282 | 283 | Lifecycle Callbacks 284 | ------------------- 285 | In React: 286 | 287 | .. code-block:: javascript 288 | 289 | const Hello = () => { 290 | useEffect(() => { 291 | console.log('I\'m just mounted!'); 292 | return () => { 293 | console.log('I\'m just unmounted!'); 294 | }; 295 | }, []); 296 | 297 | returnHello
; 298 | }; 299 | 300 | In SwiftUI: 301 | 302 | .. code-block:: swift 303 | 304 | struct Hello: View { 305 | var body: some View { 306 | Text("Hello") 307 | .onAppear { 308 | print("I'm just mounted!") 309 | } 310 | .onDisappear { 311 | print("I'm just unmounted!") 312 | } 313 | } 314 | } 315 | 316 | It's that easy. 317 | 318 | Refs 319 | ---- 320 | Components can have some internal state that will not trigger view update when it 321 | is changed. In React, we have **ref**: 322 | 323 | In React: 324 | 325 | .. code-block:: javascript 326 | 327 | const Hello = () => { 328 | const timerId = useRef(-1); 329 | useEffect(() => { 330 | timerId.current = setInterval(() => { 331 | console.log('Tick!'); 332 | }, 1000); 333 | return () => { 334 | clearInterval(timerId.current); 335 | }; 336 | }); 337 | 338 | returnHello
; 339 | }; 340 | 341 | In SwiftUI: 342 | 343 | .. code-block:: swift 344 | 345 | struct Hello: View { 346 | private class Refs: ObservableObject { 347 | var timer: Timer? 348 | } 349 | 350 | @StateObject 351 | private var refs = Refs() 352 | 353 | var body: some View { 354 | Text("Hello") 355 | .onAppear { 356 | refs.timer = 357 | Timer.scheduledTimer(withTimeInterval: 1, 358 | repeats: true) { _ in 359 | print("Tick!") 360 | } 361 | } 362 | .onDisappear { 363 | refs.timer?.invalidate() 364 | } 365 | } 366 | } 367 | 368 | And we've got two approaches: 369 | 370 | .. code-block:: swift 371 | 372 | struct Hello: View { 373 | @State 374 | private var timer: Timer? = nil 375 | 376 | var body: some View { 377 | Text("Hello") 378 | .onAppear { 379 | self.timer = 380 | Timer.scheduledTimer(withTimeInterval: 1, 381 | repeats: true) { _ in 382 | print("Tick!") 383 | } 384 | } 385 | .onDisappear { 386 | self.timer?.invalidate() 387 | } 388 | } 389 | } 390 | 391 | You may wonder why setting the state will not lead to view updates. SwiftUI is 392 | pretty clever to handle the state, it uses a technique called 393 | **Dependency Tracking**. If you are familiar with **Vue.js** or **MobX**, you may 394 | understand it immediately. That's say, if we never **access** the state's value in 395 | the view's building process (which not includes ``onAppear`` calls), that state 396 | will be unbound and can be updated freely without causing view updates. 397 | 398 | DOM Refs 399 | -------- 400 | Accessing the native DOM object is an advanced but essential feature for Web 401 | frontend development. 402 | 403 | In React: 404 | 405 | .. code-block:: javascript 406 | 407 | const Hello = () => { 408 | const pEl = useRef(); 409 | useEffect(() => { 410 | pEl.current.innerHTML = 'Hello, world!'; 411 | }, []); 412 | 413 | return ; 414 | }; 415 | 416 | In SwiftUI, we apparently don't have DOM, but for native applications, **View** is 417 | a common concept. We can bridge native views to SwiftUI and gain control of them by 418 | the way. 419 | 420 | First, let's bridge an existed ``UIView`` to SwiftUI: 421 | 422 | .. code-block:: swift 423 | 424 | struct MapView: UIViewRepresentable { 425 | let mapType: MKMapType 426 | let ref: RefBoxWelcome, please login.
; 496 | } 497 | return ( 498 |499 | Hello, {username}. 500 | 501 |
502 | ); 503 | } 504 | 505 | const Panel = () => { 506 | return ( 507 |No users
; 643 | } 644 | 645 | return ( 646 |Great!
648 |We have {users.length} users!
649 |