WEBVTT 1 00:00.350 --> 00:01.580 Bentornati. 2 00:01.580 --> 00:08.180 In questo video trasformeremo la funzione componibile campo 3 00:08.180 --> 00:09.800 di testo statico in una funzione componibile statica. 4 00:09.800 --> 00:16.490 In un approccio stateless, invece di gestire lo stato di un campo di testo 5 00:16.490 --> 00:20.960 all'interno del componibile stesso, si passerà lo stato come parametro alla funzione componibile. 6 00:20.960 --> 00:29.300 Ciò favorisce un'architettura più prevedibile e scalabile, poiché la gestione 7 00:29.300 --> 00:31.850 dello stato è disaccoppiata dalla logica di rendering dell'interfaccia utente. 8 00:31.850 --> 00:37.190 Sotto questa funzione, creerò un'altra funzione componibile. 9 00:39.440 --> 00:44.360 E lo chiamerò campo di testo stateless. 10 00:44.600 --> 00:47.330 Qui è necessario passare i parametri. 11 00:47.330 --> 00:50.540 Il primo è il testo, ovvero la stringa. 12 00:50.540 --> 00:58.640 Se torniamo al campo di testo con stato, gestiamo lo stato creando 13 00:58.640 --> 01:02.930 una variabile di tipo string text che sarà passata al valore. 14 01:02.930 --> 01:04.890 Questo è il primo. 15 01:04.890 --> 01:10.320 La seconda cosa da passare è il comportamento quando il valore è cambiato. 16 01:10.320 --> 01:13.800 Quindi dobbiamo passare questa espressione lambda. 17 01:13.800 --> 01:18.570 Qui creerò una variabile chiamata "on text changed". 18 01:18.570 --> 01:27.810 E questa variabile è di tipo lambda che prende come parametro una 19 01:27.810 --> 01:29.040 stringa e non restituisce nulla, il che va bene per l'unità. 20 01:29.070 --> 01:31.200 Questo è il nostro campo di testo stateless. 21 01:31.230 --> 01:35.700 Ora, all'interno di questo composable, inizierò creando una colonna. 22 01:35.700 --> 01:43.200 All'interno di questa colonna abbiamo un campo di testo e un testo che compone il campo di testo. 23 01:43.200 --> 01:51.360 Nell'approccio stateless non ci preoccupiamo del valore e della 24 01:51.360 --> 01:52.980 modifica del valore, perché vengono passati come parametri. 25 01:52.980 --> 01:55.200 Qui è molto semplice. 26 01:55.200 --> 02:02.760 Passo il testo che è il valore e quando il valore viene modificato, ho bisogno di passare il testo modificato. 27 02:02.760 --> 02:10.730 Quindi questi parametri vengono passati dai parametri del campo 28 02:10.760 --> 02:12.350 di testo stateless, quindi devo definire un testo. 29 02:12.350 --> 02:14.660 E qui hai scritto. 30 02:14.690 --> 02:17.750 Naturalmente utilizzerò il parametro testo. 31 02:17.750 --> 02:27.110 Inoltre, utilizzerò un altro parametro, che è l'etichetta, per 32 02:27.140 --> 02:30.470 renderlo identico al precedente campo di testo statico. 33 02:30.500 --> 02:35.930 Ora voglio che vi concentriate su di me per chiamare il campo di testo stateless. 34 02:35.930 --> 02:38.120 Stiamo per salire. 35 02:38.120 --> 02:45.170 E qui utilizzerò un campo di testo stateless. 36 02:45.170 --> 02:53.900 Qui ho bisogno di definire due parametri, il testo e l'espressione lambda all'interno del contenuto del set. 37 02:53.900 --> 03:00.860 Definirò la variabile di stato per il testo iniziando con var text by. 38 03:00.860 --> 03:07.160 Ricordiamo che è uno stato mutabile di stringa vuota. 39 03:07.160 --> 03:11.280 È molto semplice e lo abbiamo definito prima. 40 03:11.310 --> 03:16.080 Poi devo passare il parametro text come testo. 41 03:16.080 --> 03:24.960 Inoltre, poiché l'espressione lambda è l'ultimo parametro all'interno del campo 42 03:24.990 --> 03:26.820 di testo stateless componibile, posso scriverlo in questo modo. 43 03:26.820 --> 03:32.280 Oppure, se preferite il vecchio stile, posso definirlo così. 44 03:32.310 --> 03:33.780 Nuovo testo. 45 03:33.810 --> 03:36.000 Il testo è uguale al nuovo testo. 46 03:36.000 --> 03:44.760 È l'espressione lambda che verrà eseguita quando il valore del campo di testo viene modificato. 47 03:44.760 --> 03:52.440 Eseguiamo la nostra applicazione e per essere più precisi 48 03:52.470 --> 03:53.310 possiamo specificare il nome del parametro on text modificato. 49 03:53.310 --> 03:56.010 E questa è la nostra applicazione. 50 03:56.010 --> 03:57.390 E si vede. 51 03:57.420 --> 03:59.400 Ciao amici. 52 03:59.400 --> 04:02.550 L'applicazione funziona bene. 53 04:02.550 --> 04:09.150 È così che si passa da compositi con stato a compositi senza stato.