1
00:00:02,220 --> 00:00:07,770
Estado é um conceito crucial e reage e, portanto, é importante para mim que você entenda como ele

2
00:00:07,770 --> 00:00:08,160
funciona.

3
00:00:08,670 --> 00:00:14,340
VOCÊ. S. state é como você gerencia componentes funcionais e de estado, e seu estado pode ser qualquer coisa.

4
00:00:14,350 --> 00:00:15,510
Não precisa ser uma matriz.

5
00:00:15,570 --> 00:00:20,580
Pode ser algum texto, um número, um objeto, uma matriz, um booleano, qualquer coisa assim.

6
00:00:21,570 --> 00:00:24,780
Use state sempre retorna uma matriz com dois elementos.

7
00:00:24,870 --> 00:00:30,450
Não importa qual seja o seu status, se o seu estado for um estado sem uso, ainda retornará uma matriz com exatamente dois

8
00:00:30,450 --> 00:00:30,930
elementos.

9
00:00:31,380 --> 00:00:35,760
Como o primeiro elemento é sempre o seu instantâneo de estado mais recente.

10
00:00:36,210 --> 00:00:43,020
E o segundo elemento é uma função que permite atualizar esse instantâneo de estado sempre que você atualizar o

11
00:00:43,080 --> 00:00:44,350
instantâneo de estado.

12
00:00:44,520 --> 00:00:46,020
Reagir fará duas coisas.

13
00:00:46,620 --> 00:00:49,950
Ele atualizará esses dados de estado armazenados internamente.

14
00:00:50,250 --> 00:00:56,130
Assim, por exemplo, aqui, quando adicionamos nosso primeiro novo objetivo, ele substitui o estado inicial pelo nosso

15
00:00:56,130 --> 00:00:57,090
novo estado.

16
00:00:57,210 --> 00:01:00,150
Nesse caso, com a nova matriz que criamos com a Concat.

17
00:01:00,870 --> 00:01:07,500
E uma vez que ele atualizou os dados internamente, ele chamará essa função de componente novamente e executará

18
00:01:07,500 --> 00:01:08,640
a função inteira.

19
00:01:08,850 --> 00:01:11,250
E, portanto, todo o re renderizou esse J como código X.

20
00:01:12,020 --> 00:01:14,400
Agora, sob o capô, ele não renderiza todo o dom.

21
00:01:14,400 --> 00:01:20,250
Ele apenas verifica quais partes do DOM precisam ser atualizadas, mas reavaliará todo o componente.

22
00:01:20,920 --> 00:01:27,030
Isso também significa, é claro, que ele executa o estado de uso, mas usa o estado internamente, de forma que

23
00:01:27,030 --> 00:01:32,400
apenas inicialize um estado estacionário quando o componente for renderizado pela primeira vez e por um

24
00:01:32,400 --> 00:01:33,420
Rehren subsequente reciclado.

25
00:01:33,690 --> 00:01:39,630
Ele apenas retira o instantâneo do estado mais recente e basicamente ignora o valor inicial que configuramos aqui.

26
00:01:41,580 --> 00:01:43,770
É assim que um estado funciona.

27
00:01:44,370 --> 00:01:49,140
Agora, é importante entender que essa maneira de atualizar nossa propriedade nesse cenário não é a

28
00:01:49,140 --> 00:01:50,310
melhor maneira possível.

29
00:01:50,670 --> 00:01:52,980
Tão duplicado e comentado.

30
00:01:53,160 --> 00:01:54,900
Ainda o tínhamos como referência.

31
00:01:54,930 --> 00:01:56,880
Mas também vemos a melhor abordagem.

32
00:01:57,390 --> 00:01:58,830
Essa abordagem claramente funciona.

33
00:01:58,950 --> 00:02:00,600
E na maioria dos casos, funcionará.

34
00:02:01,170 --> 00:02:06,750
Mas você deve estar ciente de que todo esse estado de atualização está tornando parte do reagir.

35
00:02:07,230 --> 00:02:08,880
O fim não é gerenciado por reagir.

36
00:02:09,330 --> 00:02:15,180
E quando você ativa e declara que não pausa tudo e imediatamente entra novamente no aplicativo.

37
00:02:15,510 --> 00:02:17,910
Em vez disso, são agendas para indicar a atualização.

38
00:02:18,150 --> 00:02:23,550
E se você tiver um aplicativo com muitas atualizações de estado em andamento e muito trabalho sendo executado, o

39
00:02:23,820 --> 00:02:29,280
que não é o caso e aplica o aplicativo, mas pode ser o caso e outros aplicativos, sua atualização

40
00:02:29,340 --> 00:02:32,010
de estado poderá ser adiada por alguns milissegundos.

41
00:02:32,580 --> 00:02:39,780
Isso significa que, na verdade, talvez se um usuário clicar em adicionar ouro várias vezes, o Skold principal, atualmente renderizado na tela,

42
00:02:39,780 --> 00:02:45,900
talvez não seja o nosso estado mais recente, pois nem todas as atualizações de estado podem ter sido

43
00:02:45,900 --> 00:02:46,950
processadas ainda.

44
00:02:47,640 --> 00:02:53,670
Portanto, existe uma forma melhor de atualizar isso em vez de passar nossos novos dados de estado para definir as metas do

45
00:02:53,670 --> 00:02:53,970
curso.

46
00:02:54,360 --> 00:03:01,710
Você pode passar uma função para definir metas de curso, uma função que recebe as últimas metas de pré-curso do estado

47
00:03:01,800 --> 00:03:05,670
e precisa retornar um novo instantâneo de estado e reagir bem.

48
00:03:05,670 --> 00:03:11,070
Em seguida, agende todas essas chamadas de função e garanta que elas sejam executadas na ordem correta,

49
00:03:11,070 --> 00:03:17,160
para que, mesmo que uma atualização de estado seja adiada no momento em que a atualização é executada, ela

50
00:03:17,160 --> 00:03:18,900
garante a primeira executada também.

51
00:03:19,470 --> 00:03:25,080
E então aqui você simplesmente daria Darfor para o retorno do ouro do curso pré, que ainda não é um novo

52
00:03:25,080 --> 00:03:25,440
objetivo.

53
00:03:25,890 --> 00:03:28,680
Ele produzirá o mesmo resultado de antes neste aplicativo.

54
00:03:28,920 --> 00:03:31,850
E neste aplicativo simples, essa abordagem teria sido boa.

55
00:03:31,890 --> 00:03:39,270
Basicamente, não há chance de reagir, adiando atualizações por tanto tempo que acabaríamos com um estado incorreto.

56
00:03:39,720 --> 00:03:43,050
Mas esta é a abordagem à prova de balas que sempre funcionará.

57
00:03:43,410 --> 00:03:49,680
Você só precisará dela se a atualização do estado depender dos dados do estado anterior, assim como é o caso.

58
00:03:50,010 --> 00:03:55,860
Se sua atualização de estado for uma nova peça de dados, que não depende do estado anterior, você sempre poderá

59
00:03:55,920 --> 00:03:58,380
usar com segurança este formulário não funcional.

60
00:03:59,160 --> 00:04:03,150
E aqui está uma observação lateral, porque, é claro, todo o encurtamento tira proveito da

61
00:04:03,150 --> 00:04:06,780
sintaxe da função eral e se livra da declaração de retorno nas chaves.

62
00:04:07,050 --> 00:04:10,110
Como temos apenas uma expressão, retornamos imediatamente.

63
00:04:10,710 --> 00:04:15,690
Portanto, agora com esse anúncio, Brooks perguntou antes, mas essa é uma abordagem um pouco mais segura e ele recomendou uma

64
00:04:15,690 --> 00:04:16,080
abordagem.

65
00:04:16,110 --> 00:04:18,690
Se a atualização do seu estado depender do estado anterior.