Então agora somos capazes de nos comunicar de volta.
Na verdade, estamos atualizando nossa matriz de metas de curso no componente de aplicativo.
Mas o que você vê é que, apesar da matriz ser atualizada e claramente o novo objetivo fazer parte da matriz,
nossa saída aqui na tela não mudou.
E isso nos leva a um conceito central de estado de reação.
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
qualquer lugar do aplicativo.
Então, só porque eu clico neste botão aqui não significa que o reagir renderizará a tela inteira apenas para
garantir que não perca nenhuma alteração de dados.
Não é assim que a reação funciona.
Em vez disso, no final, você precisa dizer.
Reagir quando deveria.
Re renderizar.
E então você faz isso usando um conceito chamado discurso do estado.
Objetivos são.
Aqui está uma matriz JavaScript regular.
Em outras palavras, reagir ignora totalmente.
Temos que dizer para reagir que não deve ignorá-lo e morto.
Sempre que mudamos o array, ele deve atualizar a interface do usuário.
O código J é X do componente em que o alteramos.
Portanto, neste caso do componente do aplicativo.
Agora, para isso, importamos mais uma coisa do pacote REAC.
E esse é o estado de função da função embutido na biblioteca de reações, o chamado gancho de reação.
E você aprende mais sobre ganchos em minha reação ao guia completo.
Curso.
Claro.
Uma função que não podemos executar termina em todos os componentes funcionais.
E somente em vez de componentes funcionais em componentes baseados em classe.
Você também tem um mecanismo de gerenciamento de estado, não o foco deste curso aqui, mas também pode fazê-lo
lá.
Mas nos componentes funcionais, você usa essas funções de gancho, como são chamadas.
Todas essas funções.
Começando com o uso no início para gerenciar o estado.
Portanto, para gerenciar dados que, quando alterados, devem levar à interface do usuário do componente em que você pode
declarar a renderização.
Então aqui o componente do aplicativo.
Não quero chamar use state e usar state.
Eu passo essa matriz aqui.
Este é o meu chamado estado inicial.
Então eu posso me livrar desse conceito por enquanto.
Isso indica que este componente tem algum estado e que esse é o meu estado inicial.
A propósito, você também pode ter várias partes de estado diferentes e todas elas são observadas de forma independente.
Mas aqui eu só tenho um estado principal e esse é o meu leque de objetivos.
E digo reagir que tenho esse estado e que esse é o meu estado inicial.
Agora, é claro, quero ter acesso a esse armazenamento de estado inicial e a algumas constantes para que eu possa usá-lo no
restante do componente, porque agora o Core Scholes está ausente em todos os lugares.
Então você declara que tudo retornou alguma coisa.
Retorna uma matriz de exatamente dois elementos.
O primeiro elemento sempre é nosso instantâneo de estado mais recente.
Portanto, nosso estado inicial ou, uma vez que o alteramos, o estado atualizado.
E o segundo elemento dessa matriz retornado pelo estado de uso é uma função que nos permite atualizar esse
estado.
Substitua-o por um novo valor e diga ao react que deve ser renderizado novamente.
Então aqui ele usará a estrutura do array D usando colchetes no lado esquerdo do meu tempo igual aqui
para extrair esses dois elementos.
Eu tenho um array independente retornado pelo estado de uso.
E sempre há exatamente dois elementos.
Portanto, não depende de que tipo de dados estatísticos você passa aqui.
Use state fornece uma matriz com exatamente dois elementos.
Primeiro elemento, seu estado atual.
Então, no meu caso, minha matriz aqui.
Segundo elemento da função para atualizar o estado.
Portanto, normalmente nomeamos como conjunto.
E então qualquer nome de sua escolha Chote.
Estabeleça metas de curso no meu caso.
Então agora eu tenho duas constantes criadas com a ajuda de U. S.
A primeira constante de estado mantém meu instantâneo de estado.
Segundo, constante na verdade mantém uma função que podemos chamar para atualizar esse instantâneo de estado.
E chamaremos essa função aqui e adicionaremos uma nova meta.
O manipulador pode chamar metas de curso definidas aqui e agora.
Quero atualizar minhas metas de curso adicionando uma nova meta.
Agora, uma forma simples de fazer isso é simplesmente usar meus objetivos antigos do curso e chamar concat aqui, não push, porque
push modifica o item existente, em vez disso, defina os objetivos do curso uma vez que um novo array que substituirá o antigo
array e o concat também adicione um item a uma matriz, mas retornará uma nova matriz à qual
esse item foi adicionado.
Portanto, ele nos dá uma nova matriz, não toca a antiga.
E não passamos pela nova matriz para definir metas e reagir.
Em seguida, usará essa nova matriz sob o capô, substituirá o raio antigo em seu estado
gerenciado internamente e renderizará esse componente assim que o fizer e, portanto, atualizará os objetivos do discurso constantes com a
nova matriz.
No próximo ciclo de renderização, o que significa que o reagente executará esta função aqui e, portanto,
quando o fizer, refletirá que os novos dados em Arjay são código X.
Então aqui quero concatinar meu novo objetivo.
E se agora temos segurança.
E eu clico em adicionar objetivo, você vê novos objetivos serem adicionados à lista porque reagir agora renderiza essa tela ou as partes
que precisam ser renderizadas novamente.
Sempre que atualizamos nosso estado agora, como a exatidão da reação se repete, não é o foco deste curso.
Você pode aprender e recursos dedicados, como documentos oficiais ou meu guia completo.
Por enquanto, basta observar que reagem de maneira mágica e eficiente.
É renderizada uma página ou partes da página que precisam ser renderizadas novamente?
Com base nas mudanças de estado que aplicamos.