Todos os conceitos fundamentais do React.js, encravados neste único artigo

No ano passado, escrevi um pequeno livro sobre o aprendizado do React.js que acabou por ser de cerca de 100 páginas. Este ano, vou desafiar-me a resumi-lo como um artigo sobre o Médio.

Este artigo não abrangerá o que é React ou por que você deve aprender . Em vez disso, esta é uma introdução prática aos fundamentos do React.js para aqueles que já estão familiarizados com o JavaScript e conhecem os conceitos básicos da API DOM .

Todos os exemplos de código abaixo são rotulados para referência. Eles são exclusivamente destinados a fornecer exemplos de conceitos. A maioria deles pode ser escrita de uma maneira muito melhor.

Fundamental # 1: React é tudo sobre componentes

React é projetado em torno do conceito de componentes reutilizáveis. Você define pequenos componentes e os coloca juntos para formar componentes maiores.

Todos os componentes pequenos ou grandes são reutilizáveis, mesmo em diferentes projetos.

Um componente Reagente – na sua forma mais simples – é uma função JavaScript simples de usar:

 // Exemplo 1 
 // https://jscomplete.com/repl?j=Sy3QAdKHW
 botão de função (adereços) { 
 // Retorna um elemento DOM aqui. Por exemplo: 
 retornar <botão tipo = "enviar"> {props.label} </ button>; 
 }
 // Para renderizar o componente Button para o navegador 
 ReactDOM.render (<Etiqueta do botão = "Salvar" />, mountNode)

As chaves curly usadas para a etiqueta do botão são explicadas abaixo. Não se preocupe com eles agora. ReactDOM também será explicado mais tarde, mas se você quiser testar este exemplo e todos os próximos exemplos de código, a função de render acima é o que você precisa.

O segundo argumento para ReactDOM.render é o elemento DOM de destino que React vai assumir e controlar. No jsComplete React Playground , você pode usar apenas a variável especial mountNode .

JavaScript REPL e Playground para React.js
Teste o JavaScript moderno e o código React.js no navegador sem configurações jscomplete.com/react

Observe o seguinte sobre o Exemplo 1:

  • O nome do componente começa com uma letra maiúscula. Isso é necessário, pois tratamos de uma combinação de elementos HTML e elementos Reagentes. Os nomes minúsculos são reservados para elementos HTML. Na verdade, vá em frente e tente nomear o componente React apenas “botão” e veja como o ReactDOM ignorará a função e renderizará um botão HTML vazio regular.
  • Cada componente recebe uma lista de atributos, assim como elementos HTML. Em React, esta lista é chamada de adereços . Com um componente de função, você pode nomeá-lo qualquer coisa.
  • Nós estranhamente escrevemos o que parece HTML na saída retornada do componente da função Button acima. Isso não é nem JavaScript nem HTML, e nem sequer é React.js. Mas, é tão popular que se tornou o padrão em aplicativos React. É chamado de JSX e é uma extensão de JavaScript. JSX também é um compromisso ! Vá em frente e tente retornar qualquer outro elemento HTML dentro da função acima e veja como eles são todos suportados (por exemplo, retornar um elemento de entrada de texto).

Fundamental # 2: O que o fluxo é o JSX?

O exemplo 1 acima pode ser escrito em React.js puro sem JSX da seguinte maneira:

 // Exemplo 2 - React componente sem JSX 
 // https://jscomplete.com/repl?j=HyiEwoYB-
 botão de função (adereços) { 
 retornar React.createElement ( 
 "botão", 
 {digite: "enviar"}, 
 props.label 
 ); 
 }
 // Para usar Button, você faria algo como 
 ReactDOM.render ( 
 React.createElement (Button, {label: "Save"}), 
 mountNode 
 );

A função createElement é a função principal na API de nível superior do React. É um total de 8 coisas nesse nível que você precisa aprender. É assim que é pequena a API do React.

Muito parecido com o próprio DOM possuindo uma função document.createElement para criar um elemento especificado por um nome de tag, a função createElement do React é uma função de nível superior que pode fazer o que document.createElement faz, mas também pode ser usado para criar um elemento para representa um componente React. Fizemos o último quando usamos o componente Button no Exemplo 2 acima.

Ao contrário do document.createElement , o createElement do React aceita um número dinâmico de argumentos após o segundo para representar os filhos do elemento criado. Então createElement realmente cria uma árvore .

Aqui está um exemplo disso:

 // Exemplo 3 - API createElement do React 
 // https://jscomplete.com/repl?j=r1GNoiFBb
 const InputForm = React.createElement ( 
 "Formato", 
 {target: "_blank", ação: " https://google.com/search "}, 
 React.createElement ("div", null, "Digite entrada e clique em Pesquisar"), 
 React.createElement ("input", {name: "q", className: "input"}), 
 React.createElement (Button, {label: "Search"}) 
 );
 // InputForm usa o componente Button, então precisamos disso também: 
 botão de função (adereços) { 
 retornar React.createElement ( 
 "botão", 
 {digite: "enviar"}, 
 props.label 
 ); 
 }
 // Então podemos usar InputForm diretamente com .render 
 ReactDOM.render (InputForm, mountNode);

Observe algumas coisas sobre o exemplo acima:

  • InputForm não é um componente React; é apenas um elemento React. É por isso que usamos isso diretamente na chamada ReactDOM.render e não com <InputForm /> .
  • A função React.createElement aceitou múltiplos argumentos após os dois primeiros. Sua lista de argumentos a partir do 3º compreende a lista de filhos para o elemento criado.
  • Conseguimos aninhar chamadas React.createElement porque é tudo JavaScript.
  • O segundo argumento para React.createElement pode ser nulo ou um objeto vazio quando nenhum atributos ou adereços são necessários para o elemento.
  • Podemos misturar o elemento HTML com os elementos React.
  • A API do Reactão tenta ser o mais próximo possível da API de DOM, é por isso que usamos className vez de class para o elemento de entrada. Em segredo, todos nós desejamos que a API do React faria parte da própria API DOM. Porque, você sabe, é muito melhor.

O código acima é o que o navegador entende quando você inclui a biblioteca React. O navegador não lida com nenhum negócio JSX. No entanto, nós, seres humanos, gostamos de ver e trabalhar com o HTML em vez de estas chamadas createElement (imagine construir um site com apenas document.createElement , o que você pode!). É por isso que o compromisso JSX existe. Em vez de escrever o formulário acima com chamadas React.createElement , podemos escrevê-lo com uma sintaxe muito semelhante ao HTML:

 // Exemplo 4 - JSX (compare com o Exemplo 3) 
 // https://jscomplete.com/repl?j=SJWy3otHW
 const InputForm = 
 <formulário target = "_ blank" action = " https://google.com/search "> 
 <div> Digite entrada e clique em Pesquisar </ div> 
 <input name = "q" className = "input" /> 
 <Etiqueta do botão = "Pesquisar" /> 
 </ form>;
 // InputForm "still" usa o componente Button, então precisamos disso também. 
 // Ou JSX ou forma normal faria 
 botão de função (adereços) { 
 // Retorna um elemento DOM aqui. Por exemplo: 
 retornar <botão tipo = "enviar"> {props.label} </ button>; 
 }
 // Então podemos usar InputForm diretamente com .render 
 ReactDOM.render (InputForm, mountNode);

Observe algumas coisas sobre o acima:

  • Não é HTML. Por exemplo, ainda estamos fazendo className vez de class .
  • Ainda estamos considerando o que parece HTML acima como JavaScript. Veja como eu adicionei um ponto-e-vírgula no final.

O que escrevemos acima (Exemplo 4) é JSX. No entanto, o que levamos ao navegador é a versão compilada (Exemplo 3). Para fazer isso acontecer, precisamos usar um pré-processador para converter a versão JSX na versão React.createElement .

Isso é JSX. É um compromisso que nos permite escrever nossos componentes React em uma sintaxe semelhante ao HTML, que é um bom negócio.

A palavra “Flux” no cabeçalho acima foi escolhida para rimar, mas também é o nome de uma popular arquitetura de aplicativos popularizada pelo Facebook. A implementação mais famosa de que é Redux. O Flux se adapta perfeitamente ao padrão reativo React.

JSX, por sinal, pode ser usado por conta própria. Não é uma coisa de Reagente.

Fundamental # 3: você pode usar expressões de JavaScript em qualquer lugar no JSX

Dentro de uma seção JSX, você pode usar qualquer expressão de JavaScript dentro de um par de cintas curly.

 // Exemplo 5 - Usando expressões de JavaScript no JSX 
 // https://jscomplete.com/repl?j=SkNN3oYSW
 const RandomValue = () => 
 <div> 
 {Math.floor (Math.random () * 100)} 
 </ div>;
 // Para usá-lo: 
 ReactDOM.render (<RandomValue />, mountNode);

Qualquer expressão de JavaScript pode entrar dentro desses aparelhos curly. Isso é equivalente à sintaxe de interpolação ${} em literais de modelo de JavaScript.

Esta é a única restrição dentro do JSX: apenas expressões. Então, por exemplo, você não pode usar uma afirmação regular if , mas uma expressão ternária está bem.

As variáveis ??de JavaScript também são expressões, então, quando o componente recebe uma lista de adereços (o componente RandomValue não foi feito, os props são opcionais), você pode usar esses adereços dentro de chaves curly. Nós fizemos isso no componente Button acima (Exemplo 1).

Os objetos JavaScript também são expressões. Às vezes, usamos um objeto JavaScript dentro de cintas curly, o que faz com que pareça com chaves duplas curly, mas é realmente apenas um objeto dentro de chaves curly. Um caso de uso disso é passar um objeto de estilo CSS para o atributo de style especial em React:

 // Exemplo 6 - Um objeto passado para o suporte de estilo React especial 
 // https://jscomplete.com/repl?j=S1Kw2sFHb
 const ErrorDisplay = ({message}) => 
 <div style = {{color: 'vermelho', backgroundColor: 'amarelo'}}> 
 {mensagem} 
 </ div>;
 // Use-o: 
 ReactDOM.render ( 
 <ErrorDisplay 
 mensagem = "Estes não são os droides que você está procurando" 
 />, 
 mountNode 
 );

Observe como desestruturei apenas a mensagem do argumento de adereços. Observe também como o atributo de style acima é especial (novamente, não é HTML, está mais próximo da API de DOM). Usamos um objeto como o valor do atributo de style . Esse objeto define os estilos como se o fizéssemos com JavaScript (porque somos).

Você pode usar um elemento React dentro do JSX, porque também é uma expressão. Lembre-se, um elemento React é essencialmente uma chamada de função:

 // Exemplo 7 - Usando um elemento React dentro de {} 
 // https://jscomplete.com/repl?j=SkTLpjYr-
 const MaybeError = ({errorMessage}) => 
 <div> 
 {errorMessage && <ErrorDisplay message = {errorMessage} />} 
 </ div>; 

 // O componente MaybeError usa o componente ErrorDisplay: 
 const ErrorDisplay = ({message}) => 
 <div style = {{color: 'vermelho', backgroundColor: 'amarelo'}}> 
 {mensagem} 
 </ div>;
 // Agora podemos usar o componente MaybeError: 
 ReactDOM.render ( 
 <MaybeError 
 errorMessage = {Math.random ()> 0,5? 'Não é bom' : ''} 
 />, 
 mountNode 
 );

O componente MaybeError acima só exibiria o componente ErrorDisplay se houver uma seqüência de errorMessage passada para ele e uma div vazia. React considera {true} , {false} , {undefined} e {null} como elementos válidos para os elementos, que não renderizam nada.

Você também pode usar todos os métodos funcionais de JavaScript em coleções ( map , reduce , filter , concat , etc.) dentro do JSX. Novamente, porque eles retornam expressões:

 // Exemplo 8 - Usando um mapa de matrizes dentro de {} 
 // https://jscomplete.com/repl?j=SJ29aiYH-
 const Doubler = ({value = [1, 2, 3]}) => 
 <div> 
 {value.map (e => e * 2)} 
 </ div>;
 // Use-o 
 ReactDOM.render (<Doubler />, mountNode);

Observe como eu dei o value valor padrão acima, porque é tudo apenas o Javascript. Observe também que eu emiti uma expressão de matriz dentro da div . React está bem com isso; Ele colocará cada valor duplicado em um nó de texto.

Fundamental # 4: você pode escrever componentes do Reactor com classes de JavaScript

Os componentes de função simples são ótimos para necessidades simples, mas às vezes precisamos de mais. React aceita a criação de componentes através da sintaxe da classe JavaScript também. Aqui está o componente Button (no Exemplo 1) escrito com a sintaxe da classe:

 // Exemplo 9 - Criando componentes usando classes de JavaScript 
 // https://jscomplete.com/repl?j=ryjk0iKHb
 Classe O botão estende React.Component { 
 render () { 
 retornar <botão> {this.props.label} </ button>; 
 } 
 }
 // Use-o (mesma sintaxe) 
 ReactDOM.render (<Etiqueta do botão = "Salvar" />, mountNode);

A sintaxe da classe é simples. Defina uma classe que estenda React.Component (outra coisa de React API de nível superior que você precisa aprender). A classe define uma única função de função render() , e essa função de renderização retorna o elemento virtual DOM. Toda vez que usamos o componente Button baseado em classe acima (por exemplo, ao fazer <Button ... /> ), React instanciará um objeto desse componente baseado em classe e usará esse objeto para renderizar um elemento DOM na árvore DOM .

Esta é a razão pela qual usamos this.props.label dentro do JSX na saída renderizada acima. Como cada elemento processado através de um componente de classe obtém uma propriedade de instância especial chamada props que contém todos os valores passados ??para esse elemento quando ele foi criado.

Uma vez que temos uma instância associada a um único uso do componente, podemos personalizar essa instância conforme desejamos. Podemos, por exemplo, personalizá-lo depois que ele é construído usando a função de constructor JavaScript regular:

 // Exemplo 10 - Personalizar uma instância de componente 
 // https://jscomplete.com/repl?j=rko7RsKS-
 Classe O botão estende React.Component { 
 construtor (adereços) { 
 super (adereços); 
 this.id = Date.now (); 
 } 
 render () { 
 retornar <botão id = {this.id}> {this.props.label} </ button>; 
 } 
 }
 // Use-o 
 ReactDOM.render (<Etiqueta do botão = "Salvar" />, mountNode);

Também podemos definir funções de classe e usá-las em qualquer lugar que desejamos, incluindo dentro da saída JSX retornada:

 // Exemplo 11 - Usando propriedades de classe 
 // https://jscomplete.com/repl?j=H1YDCoFSb
 Classe O botão estende React.Component { 
 clickCounter = 0;
 handleClick = () => { 
 console.log (`Clicked: $ {++ this.clickCounter}`); 
 }; 

 render () { 
 Retorna ( 
 <button id = {this.id} onClick = {this.handleClick}> 
 {this.props.label} 
 </ button> 
 ); 
 } 
 }
 // Use-o 
 ReactDOM.render (<Etiqueta do botão = "Salvar" />, mountNode);

Observe algumas coisas sobre o Exemplo 11 acima:

  • A função handleClick é escrita usando a nova sintaxe do campo de classe proposto em JavaScript. Isso ainda está no estágio 2, mas, por muitas razões, é a melhor opção para acessar a instância montada no componente (graças às funções de seta). Mas, você precisa usar um compilador como o Babel configurado para entender o estágio 2 (ou a sintaxe do campo de classe) para obter o código acima para funcionar. O jsComplete REPL tem o pré-configurado.
  • Nós também definimos as variáveis ??de instância clickCounter usando a mesma sintaxe de campo de classe. Isso nos permite ignorar usando uma chamada de construtor de classe completamente.
  • Quando especificamos a função handleClick como o valor do atributo onClick React especial, não o chamamos. Passamos a referência para a função handleClick . Chamar a função nesse nível é um dos erros mais comuns quando se trabalha com o React.
 // Errado: 
 onClick = { this.handleClick () }
 // Certo: 
 onClick = { this.handleClick }

Fundamental # 5: Eventos em Reacção: Duas Diferenças Importantes

Ao lidar com os eventos dentro dos elementos React, há duas diferenças muito importantes da maneira como fazemos isso com a API DOM:

  • Todos os atributos dos Itens do Reagente (eventos incluídos) são nomeados usando camelCase , em vez de minúsculas . É onClick , não onclick .
  • Passamos uma referência de função de JavaScript real como o manipulador de eventos, em vez de uma string. É onClick={ handleClick } , não onClick=" handleClick" .

React envolve o objeto de evento DOM com um objeto próprio para otimizar o desempenho do gerenciamento de eventos. Mas, dentro de um manipulador de eventos, ainda podemos acessar todos os métodos disponíveis no objeto de evento DOM. React passa o objeto de evento envolvido para cada chamada de identificador. Por exemplo, para evitar um formulário da ação de submissão padrão, você pode:

 // Exemplo 12 - Trabalhando com eventos envolvidos 
 // https://jscomplete.com/repl?j=HkIhRoKBb
 Formulário de classe estende React.Component { 
 handleSubmit = (event) => { 
 event.preventDefault (); 
 console.log ('Formulário enviado'); 
 }; 

 render () { 
 Retorna ( 
 <form onSubmit = {this.handleSubmit}> 
 <button type = "submit"> Enviar </ button> 
 </ form> 
 ); 
 } 
 }
 // Use-o 
 ReactDOM.render (<Form />, mountNode);

Fundamental # 6: cada componente React tem uma história

O seguinte se aplica apenas ao componente de classe (aqueles que estendem React.Component ). Os componentes da função têm uma história ligeiramente diferente.

  1. Primeiro, definimos um modelo para React para criar elementos do componente.
  2. Então, instruímos o React para usá-lo em algum lugar. Por exemplo, dentro de uma chamada de render de outro componente, ou com ReactDOM.render .
  3. Então, React instancia um elemento e dá-lhe um conjunto de adereços que podemos acessar com this.props . Esses adereços são exatamente o que passamos no passo 2 acima.
  4. Como é tudo o JavaScript, o método do constructor será chamado (se definido). Este é o primeiro daquilo que chamamos: métodos do ciclo de vida do componente .
  5. React, em seguida, calcula a saída do método de renderização (o nó DOM virtual).
  6. Uma vez que esta é a primeira vez que o React está processando o elemento, o React se comunicará com o navegador (em nosso nome, usando a API DOM) para exibir o elemento lá. Este processo é comumente conhecido como montagem .
  7. React então invoca outro método do ciclo de vida, chamado componentDidMount . Podemos usar esse método para, por exemplo, fazer algo no DOM que agora sabemos existir no navegador. Antes deste método do ciclo de vida, o DOM com o qual trabalhamos era tudo virtual.
  8. Algumas histórias de componentes terminam aqui. Outros componentes são desmontados do navegador DOM por vários motivos. Antes de o último acontecer, React invoca outro método do ciclo de vida, componentWillUnmount .
  9. O estado de qualquer elemento montado pode mudar. O pai desse elemento pode voltar a renderizar. Em ambos os casos, o elemento montado pode receber um conjunto diferente de adereços. A mágica de reação acontece aqui e nós realmente começamos a precisar de React neste momento! Antes deste ponto, não precisávamos de React, honestamente.

A história deste componente continua, mas antes disso, precisamos entender o estado desse estado de que eu falo.

Fundamental # 7: os componentes de Reacção podem ter um estado privado

O seguinte também é aplicável somente aos componentes da classe. Eu mencionei que algumas pessoas chamam os componentes apenas de apresentação, burros ?

A propriedade do state é especial em qualquer componente da classe React. React monitora cada estado do componente para mudanças. Mas para React para fazer de forma eficiente, temos que mudar o campo de estado através de outra coisa de React API que precisamos aprender, this.setState :

 // Exemplo 13 - a API setState 
 // https://jscomplete.com/repl?j=H1fek2KH-
 classe CounterButton extends React.Component { 
 state = { 
 clickCounter: 0, 
 currentTimestamp: new Date (), 
 }; 

 handleClick = () => { 
 this.setState ((prevState) => { 
 retornar {clickCounter: prevState.clickCounter + 1}; 
 }); 
 }; 

 componentDidMount () { 
 setInterval (() => { 
 this.setState ({currentTimestamp: new Date ()}) 
 }, 1000); 
 } 

 render () { 
 Retorna ( 
 <div> 
 <botão onClick = {this.handleClick}> Clique em </ button> 
 <p> Clicou: {this.state.clickCounter} </ p> 
 <p> Tempo: {this.state.currentTimestamp.toLocaleString ()} </ p> 
 </ div> 
 ); 
 } 
 }
 // Use-o 
 ReactDOM.render (<CounterButton />, mountNode);

Este é o exemplo mais importante para entender. Completará basicamente seu conhecimento fundamental do modo React. Após este exemplo, existem algumas outras pequenas coisas que você precisa aprender, mas é principalmente você e suas habilidades de JavaScript a partir desse ponto.

Passemos pelo Exemplo 13, começando pelos campos de aula. Tem dois deles. O campo de state especial é inicializado com um objeto que contém um clickCounter que começa com 0 e um currentTimestamp que começa com a new Date() .

O campo de segunda classe é uma função handleClick , que passamos para o evento onClick para o elemento do botão dentro do método de renderização. O método handleClick modifica esse estado de instância de componente usando setState . Tome conhecimento disso.

O outro lugar em que estamos modificando o estado está dentro de um temporizador de intervalo que iniciamos dentro do método de ciclo de vida componentDidMount . Ele marca todos os segundos e executa outra chamada para this.setState .

No método de renderização, usamos as duas propriedades que temos no estado com uma sintaxe de leitura normal. Não existe uma API especial para isso.

Agora, note que atualizamos o estado usando duas maneiras diferentes:

  1. Ao passar uma função que retornou um objeto. Nós fizemos isso dentro da função handleClick .
  2. Ao passar um objeto comum. Nós fizemos isso dentro do intervalo de retorno de chamada.

Ambos os modos são aceitáveis, mas o primeiro é preferido quando você lê e escreve no estado ao mesmo tempo (o que fazemos). Dentro do callback de intervalo, estamos apenas escrevendo para o estado e não lendo isso. Em caso de dúvida, use sempre a primeira sintaxe de função-como-argumento. É mais seguro com as condições de corrida porque o setState deve sempre ser tratado como um método assíncrono.

Como atualizamos o estado? Devolvemos um objeto com o novo valor do que queremos atualizar. Observe como em ambas as chamadas para setState , estamos passando apenas uma propriedade do campo de estado e não ambas. Isso está completamente bom porque setState realmente combina o que você passa (o valor retornado do argumento da função) com o estado existente. Portanto, não especificar uma propriedade ao chamar setState significa que não queremos alterar essa propriedade (mas não excluí-la).

Fundamental # 8: React  reagirá

React obtém o seu nome pelo fato de que ele reage às mudanças de estado (embora não de forma reativa, mas em uma programação). Havia uma piada que React deveria ter sido nomeado Programação !

No entanto, o que testemunhamos a olho nu quando o estado de qualquer componente é atualizado é que o React reage a essa atualização e reflete automaticamente a atualização no DOM do navegador (se necessário).

Pense na entrada da função de renderização como ambas:

  • Os adereços que são aprovados pelos pais
  • O estado privado interno que pode ser atualizado a qualquer momento

Quando a entrada da função de renderização muda, a saída pode mudar.

React mantém um registro do histórico de renderizações e quando vê que um render é diferente do anterior, ele calculará a diferença entre eles e o traduzirá eficientemente em operações reais do DOM que serão executadas no DOM.

Fundamental # 9: React é seu agente

Você pode pensar em React como o agente que contratamos para se comunicar com o navegador. Pegue a exibição do carimbo de data / hora atual acima como exemplo. Ao invés de nós, vamos manualmente ao navegador e invocamos as operações da API de DOM para encontrar e atualizar o elemento de p#timestamp cada segundo, acabamos de alterar uma propriedade no estado do componente e o React fez seu trabalho de comunicação com o navegador em nosso nome. Eu acredito que esta é a verdadeira razão pela qual o React é popular. Odiamos conversar com o Sr. Navegador (e os tantos dialetos da língua DOM que fala) e React se ofereceu para fazer todas as conversas por nós, de graça.

Fundamental # 10: cada componente React tem uma história (parte 2)

Agora que sabemos sobre o estado de um componente e como, quando esse estado muda, alguma magia acontece, vamos aprender os últimos conceitos sobre esse processo.

  1. Um componente pode precisar renderizar novamente quando seu estado é atualizado ou quando seu pai decide alterar os adereços que passou para o componente
  2. Se o último acontecer, React invoca outro método do ciclo de vida, componentWillReceiveProps .
  3. Se o objeto de estado ou os adereços passados ??forem alterados, o React terá uma decisão importante a ser tomada. O componente deve ser atualizado no DOM? É por isso que invoca outro método importante do ciclo de vida aqui, shouldComponentUpdate . Este método é uma questão real, então se você precisa para personalizar ou otimizar o processo de renderização em seu próprio país, você tem que responder a essa pergunta, retornando verdadeiro ou falso.
  4. Se não houver nenhum custom shouldComponentUpdate especificado, React padrões para uma coisa muito inteligente que é realmente bom o suficienct na maioria das situações.
  5. Primeiro, React invoca outro método do ciclo de vida neste ponto, componentWillUpdate . React irá então calcular a nova saída renderizada e compará-la com a última saída renderizada.
  6. Se a saída renderizada for exatamente a mesma, o React não faz nada (não precisa conversar com o Sr. Navegador).
  7. Se houver uma diferença, React leva essa diferença ao navegador, como já vimos antes.
  8. Em qualquer caso, uma vez que um processo de atualização aconteceu de qualquer maneira (mesmo que o resultado fosse exatamente o mesmo), React invoca o método final do ciclo de vida, componentDidUpdate .

Os métodos do ciclo de vida são realmente escotilhas de escape. Se você não está fazendo nada especial, você pode criar aplicativos completos sem eles. Eles são muito úteis para analisar o que está acontecendo no aplicativo e para otimizar ainda mais o desempenho das atualizações do React.

É isso aí. Acredite ou não, com o que você aprendeu acima (ou partes dele, realmente), você pode começar a criar algumas aplicações de Reagentes interessantes. Se você está com fome de mais, confira meu livro Learn React.js por construção de jogos !

 

Graças aos muitos leitores que revisaram e melhoraram este artigo, ?ukasz Szewczak, Tim Broyles, Kyle Holden, Robert Axelse, Bruce Lane, Irvin Waldman e Amie Wilt.

Eu dediquei uma grande parte do meu 2017 a escrever livros que estão todos disponíveis na Amazon: