Guia animado básico de React

O autor da nota, que estamos publicando a tradução de hoje, diz que existe uma lacuna entre o uso do React para o desenvolvimento de interfaces com o usuário e a necessidade de saber como o React realmente funciona. Muitas pessoas que usam o React na prática não sabem o que está acontecendo nas entranhas desta biblioteca. Aqui, de forma animada, consideraremos alguns processos-chave que ocorrem no React durante a formação das interfaces do usuário.

Iniciando um aplicativo React

Deve-se observar que, para criar aplicativos React, você provavelmente não deve conhecer os mecanismos internos do React. Mas eu decidi preparar este material para todos aqueles que, por qualquer motivo, querem entender melhor o trabalho do React. Os processos descritos são apresentados em forma animada. Espero que isso ajude a tornar sua análise mais clara.

Reagir, quando você inicia o aplicativo, monta automaticamente a classe App no contêiner raiz do aplicativo.


Primeira montagem <App />

DOM virtual e algoritmo de comparação

Durante o trabalho do subsistema React que implementa o algoritmo de difusão, é feita uma pesquisa pelas diferenças entre os dois DOMs virtuais (modelo de objeto de documento virtual, modelo de documento virtual). Diminua a velocidade por um tempo. Dois DOM virtual? Parece haver apenas um DOM virtual no React ... Vamos descobrir. O React compara o DOM virtual anterior com o novo. A atualização do DOM baseado no navegador é feita apenas se, ao comparar os DOMs virtuais, forem reveladas diferenças entre eles.


Animação abstrata do algoritmo de comparação React. Se for descoberto que as duas árvores virtuais do DOM são diferentes, o DOM real no navegador será correspondido com a mais recente árvore virtual do DOM

Considere o que acontece na animação acima.

• No evento click , uma chamada API.tweet() é API.tweet() com os dados da solicitação POST que contêm a message .
• Em resposta à solicitação, a payload retornada, esses dados são enviados para o retorno de chamada (event) => { … } .
• Se os dados retornados à payload causarem uma alteração nos props , será realizada uma comparação das árvores virtuais do DOM.
• Se as árvores forem diferentes, a árvore mais recente será enviada ao navegador.
• Então, o novo DOM virtual se torna antigo e esperamos novos eventos.

Reagir componentes

O componente React é apenas um objeto JavaScript. O React cria seu próprio DOM virtual, que é uma visualização em árvore de toda a estrutura da interface do usuário. O React armazena a árvore DOM virtual na memória. Antes que o conteúdo do DOM virtual seja exibido fisicamente em uma janela do navegador, o React pode executar muitas operações para adicionar, atualizar e excluir itens do DOM virtual.

Não use o método do componente render() para algo não relacionado à renderização de elementos da interface do usuário. Se você precisar alterar o estado ou as propriedades de um componente, use métodos padrão do ciclo de vida dos componentes do React.

O método render () deve sempre permanecer uma função pura.

O método render() atualiza o DOM do componente virtual. Se a nova árvore DOM virtual for diferente da árvore exibida anteriormente, o React, além de atualizar o DOM virtual, também atualizará o DOM real do navegador. O desenvolvedor não precisa atualizar diretamente o DOM do navegador diretamente. Esta regra se aplica a qualquer local no código de um aplicativo React. É especialmente importante quando aplicado à função render() .


Não polua o método render () com chamadas de função que de alguma forma atualizam o DOM diretamente

No método render() , você não deve alterar o estado do componente (mesmo usando setState ) e executar solicitações HTTP. Não acesse o jQuery a partir desse método, não execute solicitações para carregar determinados dados. O fato é que o método render() precisa ser mantido em um estado no qual seria uma função pura. Este método é sempre chamado no estágio final dos mecanismos componentes. No curso de sua implementação, você só precisa atualizar a interface do usuário. Supõe-se que todas as atualizações no DOM virtual já foram concluídas.

Eventos do ciclo de vida do componente

Quando um componente é montado pela primeira vez no DOM, o React gera seu evento de ciclo de vida componentWillMount . Depois que o componente virtual é exibido pela primeira vez (ou seja, é montado pela primeira vez no DOM real do navegador), outro evento é chamado - componentDidMount .

Espera-se que a maior parte da lógica do componente invocada durante todas as etapas do aplicativo seja descrita precisamente em seus métodos de ciclo de vida.

Sumário

Atualmente, muitos desenvolvedores do React usam componentes funcionais e ganchos em vez de componentes baseados em classes e seus métodos de ciclo de vida. Os métodos do ciclo de vida são considerados inseguros. Se você acredita na documentação do React, talvez esses métodos sejam descontinuados no futuro. É por isso que o autor considera este artigo como uma descrição de tecnologias, algumas das quais podem em breve ficar esquecidas. Mas ele, apesar disso, espera que esse material seja útil para aqueles que estão começando a se familiarizar com o React e para aqueles que estão interessados ​​na história do desenvolvimento de tecnologias de desenvolvimento da web.

Caros leitores! Você usa ganchos React?