WEBVTT 1 00:00.770 --> 00:01.910 Bentornati. 2 00:01.910 --> 00:05.690 In questo video impareremo a conoscere il sollevamento dello Stato. 3 00:05.690 --> 00:13.010 Lo State Hoisting è un concetto di Jetpack Compose che prevede il sollevamento 4 00:13.010 --> 00:16.310 della gestione dello stato da un composable figlio a un composable padre. 5 00:16.310 --> 00:24.410 Questo schema è comunemente usato per gestire lo stato in modo più centralizzato, 6 00:24.410 --> 00:27.530 rendendo la base di codice più facile da comprendere, mantenere e testare. 7 00:27.560 --> 00:33.860 Si inizia identificando un componibile che deve contenere alcuni dati e alcuni stati. 8 00:33.860 --> 00:41.150 Potrebbe trattarsi di un campo di testo, di una casella di controllo, di un pulsante o di 9 00:41.150 --> 00:45.740 qualsiasi altro componente che deve tracciare il suo stato, come un input dell'utente o lo stato selezionato. 10 00:45.740 --> 00:48.830 Invece di gestire lo stato all'interno del bambino. 11 00:48.830 --> 00:54.200 Composable stesso, si sposta la logica di gestione dello stato al genitore. 12 00:54.200 --> 00:55.190 Componibile. 13 00:55.190 --> 01:02.360 Ciò significa che il compositore genitore diventa responsabile di 14 01:02.360 --> 01:03.170 mantenere lo stato e di passarlo al figlio. 15 01:03.170 --> 01:05.540 Componibile come parametro. 16 01:05.540 --> 01:07.280 Facciamo un esempio. 17 01:07.280 --> 01:10.940 Ecco la differenza tra stateful e stateless. 18 01:10.940 --> 01:17.360 Una funzione composta che mantiene il suo stato è detta stateful, mentre 19 01:17.360 --> 01:20.720 una funzione composta che non mantiene il suo stato è detta stateless. 20 01:20.750 --> 01:22.220 Questo è l'apolide. 21 01:22.250 --> 01:26.780 Nella maggior parte dei casi, si vuole che il composable rimanga stateless. 22 01:26.780 --> 01:35.540 Idealmente, lo stato dell'intero schermo viene calcolato in un unico punto, 23 01:35.540 --> 01:39.050 di solito nel ViewModel, che lo trasmette a tutti i Composable. 24 01:39.050 --> 01:47.330 Quindi si passano il valore dello stato ed eventuali callback necessari, come i gestori 25 01:47.330 --> 01:55.820 di eventi per gli aggiornamenti dello stato dal genitore, componibile al figlio componibile come 26 01:55.820 --> 02:01.610 parametri, mentre il livello di stato del vostro schermo componibile, quello responsabile del 27 02:01.610 --> 02:03.020 rendering dell'intero schermo, è un buon candidato per mantenere lo stato dell'intero schermo. 28 02:03.020 --> 02:09.710 Di solito questi composable hanno un riferimento a un ViewModel, che calcola lo 29 02:09.710 --> 02:14.390 stato dell'intero schermo issando lo stato a un livello superiore per genitore. 30 02:14.390 --> 02:15.350 Componibile. 31 02:15.350 --> 02:21.390 Si crea un'unica fonte di verità per lo stato all'interno della gerarchia dei componenti. 32 02:21.420 --> 02:29.790 In questo modo si favorisce un migliore incapsulamento, la separazione delle preoccupazioni e la riutilizzabilità dei singoli componenti. 33 02:29.820 --> 02:37.980 Inoltre, semplifica i test, in quanto è possibile testare il comportamento dei componenti con 34 02:37.980 --> 02:42.990 stato in isolamento, fornendo lo stato mock e i callback dei componenti genitori. 35 02:43.020 --> 02:49.950 Lo vedremo nelle sezioni dedicate all'iniezione di dipendenza, ma qui voglio che vi concentriate con me sul 36 02:49.950 --> 02:57.030 fatto che, per trasformare un composito statico in uno statico, dobbiamo usare il sollevamento dello stato. 37 02:57.030 --> 02:59.970 Ad esempio, qui abbiamo il contatore stateful. 38 02:59.970 --> 03:06.420 Gestisce il proprio stato utilizzando una variabile chiamata count by remember. 39 03:06.420 --> 03:08.430 E si parte da zero. 40 03:08.430 --> 03:13.860 Quindi questo composito gestisce il proprio stato. 41 03:13.860 --> 03:19.080 Se abbiamo bisogno di renderlo stateless, useremo il sollevamento dello stato. 42 03:19.110 --> 03:19.770 Di nuovo. 43 03:19.770 --> 03:26.670 L'accumulo di stato significa rimuovere qualsiasi stato persistente da una funzione componibile. 44 03:26.670 --> 03:29.310 In questo caso è necessario rimuovere il conteggio. 45 03:29.310 --> 03:34.860 Invece, si passa lo stato attraverso i parametri della funzione. 46 03:34.860 --> 03:45.540 Lo stateless composable riceverà la sua variabile parameter count e il lambda onclick. 47 03:45.540 --> 03:53.250 Quindi nel contatore stateful abbiamo il conteggio come prima 48 03:53.250 --> 03:54.540 dipendenza e la seconda dipendenza è l'evento click. 49 03:54.570 --> 03:57.870 Gestire l'evento click aumentando il conteggio e il comportamento. 50 03:57.870 --> 04:03.120 Nel contatore stateless, passiamo il conteggio e il comportamento. 51 04:03.120 --> 04:10.050 Quando l'utente fa clic sul pulsante, si può notare la pulizia del contatore stateless, 52 04:10.080 --> 04:14.970 che mostra solo il pulsante e il testo in modo semplice e pulito. 53 04:14.970 --> 04:22.260 Quindi, nel contatore stateless, non ci preoccupiamo di cosa fare quando l'utente fa clic 54 04:22.260 --> 04:28.440 sul pulsante o di quale testo visualizzare e di gestire la variabile del conteggio. 55 04:28.440 --> 04:34.290 Nei prossimi video, impareremo a conoscere stateful e stateless.