1
00:00:02,510 --> 00:00:04,590
Então agora somos capazes de nos comunicar de volta.

2
00:00:05,470 --> 00:00:10,240
Na verdade, estamos atualizando nossa matriz de metas de curso no componente de aplicativo.

3
00:00:11,040 --> 00:00:17,170
Mas o que você vê é que, apesar da matriz ser atualizada e claramente o novo objetivo fazer parte da matriz,

4
00:00:17,740 --> 00:00:19,960
nossa saída aqui na tela não mudou.

5
00:00:20,260 --> 00:00:23,920
E isso nos leva a um conceito central de estado de reação.

6
00:00:25,170 --> 00:00:34,530
React não processa a descarga é o código X e, portanto, a interface do usuário real o tempo todo, sempre que algum evento é acionado em

7
00:00:34,560 --> 00:00:36,060
qualquer lugar do aplicativo.

8
00:00:36,270 --> 00:00:41,400
Então, só porque eu clico neste botão aqui não significa que o reagir renderizará a tela inteira apenas para

9
00:00:41,400 --> 00:00:43,890
garantir que não perca nenhuma alteração de dados.

10
00:00:44,130 --> 00:00:46,080
Não é assim que a reação funciona.

11
00:00:46,560 --> 00:00:48,270
Em vez disso, no final, você precisa dizer.

12
00:00:48,330 --> 00:00:49,610
Reagir quando deveria.

13
00:00:49,650 --> 00:00:50,340
Re renderizar.

14
00:00:51,050 --> 00:00:55,150
E então você faz isso usando um conceito chamado discurso do estado.

15
00:00:55,230 --> 00:00:55,640
Objetivos são.

16
00:00:55,760 --> 00:00:57,610
Aqui está uma matriz JavaScript regular.

17
00:00:58,230 --> 00:01:01,640
Em outras palavras, reagir ignora totalmente.

18
00:01:02,280 --> 00:01:06,840
Temos que dizer para reagir que não deve ignorá-lo e morto.

19
00:01:06,900 --> 00:01:11,660
Sempre que mudamos o array, ele deve atualizar a interface do usuário.

20
00:01:11,690 --> 00:01:15,360
O código J é X do componente em que o alteramos.

21
00:01:15,450 --> 00:01:17,490
Portanto, neste caso do componente do aplicativo.

22
00:01:18,420 --> 00:01:22,440
Agora, para isso, importamos mais uma coisa do pacote REAC.

23
00:01:22,470 --> 00:01:29,490
E esse é o estado de função da função embutido na biblioteca de reações, o chamado gancho de reação.

24
00:01:29,610 --> 00:01:32,400
E você aprende mais sobre ganchos em minha reação ao guia completo.

25
00:01:32,430 --> 00:01:32,730
Curso.

26
00:01:32,730 --> 00:01:33,180
Claro.

27
00:01:33,870 --> 00:01:38,340
Uma função que não podemos executar termina em todos os componentes funcionais.

28
00:01:38,580 --> 00:01:42,770
E somente em vez de componentes funcionais em componentes baseados em classe.

29
00:01:42,810 --> 00:01:47,880
Você também tem um mecanismo de gerenciamento de estado, não o foco deste curso aqui, mas também pode fazê-lo

30
00:01:47,880 --> 00:01:48,240
lá.

31
00:01:48,660 --> 00:01:53,700
Mas nos componentes funcionais, você usa essas funções de gancho, como são chamadas.

32
00:01:53,970 --> 00:01:54,960
Todas essas funções.

33
00:01:55,020 --> 00:01:59,280
Começando com o uso no início para gerenciar o estado.

34
00:01:59,790 --> 00:02:06,390
Portanto, para gerenciar dados que, quando alterados, devem levar à interface do usuário do componente em que você pode

35
00:02:06,390 --> 00:02:07,830
declarar a renderização.

36
00:02:08,610 --> 00:02:09,810
Então aqui o componente do aplicativo.

37
00:02:10,200 --> 00:02:14,280
Não quero chamar use state e usar state.

38
00:02:14,790 --> 00:02:16,410
Eu passo essa matriz aqui.

39
00:02:16,800 --> 00:02:18,960
Este é o meu chamado estado inicial.

40
00:02:18,990 --> 00:02:21,690
Então eu posso me livrar desse conceito por enquanto.

41
00:02:22,260 --> 00:02:26,970
Isso indica que este componente tem algum estado e que esse é o meu estado inicial.

42
00:02:27,180 --> 00:02:32,100
A propósito, você também pode ter várias partes de estado diferentes e todas elas são observadas de forma independente.

43
00:02:32,370 --> 00:02:35,790
Mas aqui eu só tenho um estado principal e esse é o meu leque de objetivos.

44
00:02:36,330 --> 00:02:40,290
E digo reagir que tenho esse estado e que esse é o meu estado inicial.

45
00:02:41,220 --> 00:02:46,620
Agora, é claro, quero ter acesso a esse armazenamento de estado inicial e a algumas constantes para que eu possa usá-lo no

46
00:02:46,620 --> 00:02:50,280
restante do componente, porque agora o Core Scholes está ausente em todos os lugares.

47
00:02:50,940 --> 00:02:52,980
Então você declara que tudo retornou alguma coisa.

48
00:02:53,430 --> 00:02:56,490
Retorna uma matriz de exatamente dois elementos.

49
00:02:56,910 --> 00:03:01,110
O primeiro elemento sempre é nosso instantâneo de estado mais recente.

50
00:03:01,500 --> 00:03:05,760
Portanto, nosso estado inicial ou, uma vez que o alteramos, o estado atualizado.

51
00:03:06,450 --> 00:03:12,630
E o segundo elemento dessa matriz retornado pelo estado de uso é uma função que nos permite atualizar esse

52
00:03:12,630 --> 00:03:13,080
estado.

53
00:03:13,500 --> 00:03:18,030
Substitua-o por um novo valor e diga ao react que deve ser renderizado novamente.

54
00:03:18,930 --> 00:03:26,010
Então aqui ele usará a estrutura do array D usando colchetes no lado esquerdo do meu tempo igual aqui

55
00:03:26,730 --> 00:03:28,620
para extrair esses dois elementos.

56
00:03:28,680 --> 00:03:31,270
Eu tenho um array independente retornado pelo estado de uso.

57
00:03:31,380 --> 00:03:33,810
E sempre há exatamente dois elementos.

58
00:03:34,080 --> 00:03:37,200
Portanto, não depende de que tipo de dados estatísticos você passa aqui.

59
00:03:37,440 --> 00:03:40,140
Use state fornece uma matriz com exatamente dois elementos.

60
00:03:40,470 --> 00:03:42,740
Primeiro elemento, seu estado atual.

61
00:03:42,840 --> 00:03:45,230
Então, no meu caso, minha matriz aqui.

62
00:03:45,870 --> 00:03:48,120
Segundo elemento da função para atualizar o estado.

63
00:03:48,240 --> 00:03:50,460
Portanto, normalmente nomeamos como conjunto.

64
00:03:51,150 --> 00:03:52,770
E então qualquer nome de sua escolha Chote.

65
00:03:52,860 --> 00:03:54,330
Estabeleça metas de curso no meu caso.

66
00:03:54,900 --> 00:03:57,600
Então agora eu tenho duas constantes criadas com a ajuda de U. S.

67
00:03:57,720 --> 00:04:00,600
A primeira constante de estado mantém meu instantâneo de estado.

68
00:04:00,840 --> 00:04:05,880
Segundo, constante na verdade mantém uma função que podemos chamar para atualizar esse instantâneo de estado.

69
00:04:06,510 --> 00:04:09,360
E chamaremos essa função aqui e adicionaremos uma nova meta.

70
00:04:09,360 --> 00:04:13,410
O manipulador pode chamar metas de curso definidas aqui e agora.

71
00:04:13,410 --> 00:04:16,740
Quero atualizar minhas metas de curso adicionando uma nova meta.

72
00:04:17,400 --> 00:04:24,210
Agora, uma forma simples de fazer isso é simplesmente usar meus objetivos antigos do curso e chamar concat aqui, não push, porque

73
00:04:24,210 --> 00:04:31,350
push modifica o item existente, em vez disso, defina os objetivos do curso uma vez que um novo array que substituirá o antigo

74
00:04:31,350 --> 00:04:37,110
array e o concat também adicione um item a uma matriz, mas retornará uma nova matriz à qual

75
00:04:37,140 --> 00:04:38,520
esse item foi adicionado.

76
00:04:38,850 --> 00:04:41,870
Portanto, ele nos dá uma nova matriz, não toca a antiga.

77
00:04:42,190 --> 00:04:46,080
E não passamos pela nova matriz para definir metas e reagir.

78
00:04:46,080 --> 00:04:52,200
Em seguida, usará essa nova matriz sob o capô, substituirá o raio antigo em seu estado

79
00:04:52,200 --> 00:04:59,760
gerenciado internamente e renderizará esse componente assim que o fizer e, portanto, atualizará os objetivos do discurso constantes com a

80
00:04:59,760 --> 00:05:00,660
nova matriz.

81
00:05:00,900 --> 00:05:06,210
No próximo ciclo de renderização, o que significa que o reagente executará esta função aqui e, portanto,

82
00:05:06,240 --> 00:05:10,470
quando o fizer, refletirá que os novos dados em Arjay são código X.

83
00:05:11,430 --> 00:05:13,560
Então aqui quero concatinar meu novo objetivo.

84
00:05:13,990 --> 00:05:15,360
E se agora temos segurança.

85
00:05:16,850 --> 00:05:25,300
E eu clico em adicionar objetivo, você vê novos objetivos serem adicionados à lista porque reagir agora renderiza essa tela ou as partes

86
00:05:25,360 --> 00:05:27,610
que precisam ser renderizadas novamente.

87
00:05:28,120 --> 00:05:35,500
Sempre que atualizamos nosso estado agora, como a exatidão da reação se repete, não é o foco deste curso.

88
00:05:35,530 --> 00:05:39,850
Você pode aprender e recursos dedicados, como documentos oficiais ou meu guia completo.

89
00:05:40,450 --> 00:05:45,040
Por enquanto, basta observar que reagem de maneira mágica e eficiente.

90
00:05:45,300 --> 00:05:49,840
É renderizada uma página ou partes da página que precisam ser renderizadas novamente?

91
00:05:50,020 --> 00:05:52,150
Com base nas mudanças de estado que aplicamos.