Conceitos que você deveria saber sobre React.js (depois de aprender o basico)
Você seguiu seu primeiro tutorial de React.js e está se sentindo ótimo. E agora? No artigo seguinte, eu vou discutir 5 conceitos que irá levar seus conhecimentos sobre React a um nível superior.
Se você é novo em React, tire um tempo para completar este tutorial e volte aqui depois!
1. O Ciclo de vida do Componente
De longe, o conceito mais importante nessa lista é entender o ciclo de vida do componente. O ciclo de vida do componente é exatamente o que parece: detalha a vida de um componente. Como nós, componentes nascem, fazem algumas coisas durante seu tempo aqui na terra, e então eles morrem ☹️
Mas, ao contrário de nós, os estágios da vida de um componente são um pouco diferentes. Como você pode ver aqui:
Vamos detalhar essa imagem. Cada retângulo horizontal colorido representa um método do ciclo de vida (exceto “React updates DOM and refs”). As colunas representam diferentes estágios na vida útil dos componentes.
Um componente só pode estar em um estágio por vez. Começa com a montagem e passa para a atualização. Ele permanece atualizando perpetuamente até que seja removido do DOM virtual. Em seguida, ele entra na fase de desmontagem e é removido do DOM.
Os métodos do ciclo de vida nos permitem executar o código em pontos específicos na vida útil do componente ou em resposta a alterações na vida útil do componente.
Vamos passar por cada estágio do componente e pelos métodos associados.
Montagem
Como os componentes com ciclo de vida são classes, o primeiro método que executa é o método constructor. Normalmente, o constructor é onde você inicializaria o estado do componente.
Em seguida, o componente executa o getDerivedStateFromProps. Vou pular este método, pois ele tem uso limitado.
Agora chegamos ao método render que retorna seu JSX. O React “monta” o DOM.
Por fim, o método componentDidMount é executado. Aqui é onde você pode fazer qualquer chamada assíncrona para banco de dados ou manipular diretamente o DOM, se necessário. Só assim, nosso componente nasce.
Atualização
Esta fase é acionada toda vez que o estado ou alguma propriedade mudam. Como na montagem, getDerivedStateFromProps é chamado (o construtor não é executado dessa vez!).
Depois o shouldComponentUpdate é executado. Aqui você pode comparar propriedades/estado antigos com o novo conjunto de propriedades/estado. Você pode determinar se seu componente deve renderizar novamente ou não, retornando true ou false. Isso pode fazer com que sua aplicação se torne mais performática, reduzindo as re-renderizações extras. Se shouldComponentUpdate retornar false, este ciclo de atualização será finalizado.
Caso contrário, o React irá renderizar o componente novamente e getSnapshotBeforeUpdate será executado posteriormente. Este método também tem uso limitado. O React, em seguida, executa componentDidUpdate. Como o componentDidMount, você pode usá-lo para fazer chamadas assíncronas ou manipular o DOM.
Desmontagem
Nosso componente viveu uma boa vida, mas todas as coisas boas chegam ao fim. A fase de desmontagem é o último estágio do ciclo de vida do componente. Quando você remove um componente do DOM, o React executa o componenteWillUnmount antes do componente ser removido. Você deve usar esse método para limpar qualquer conexão aberta, como WebSockets ou temporizadores.
Outros Métodos do Ciclo de vida
Antes de passarmos para o próximo tópico, vamos falar brevemente sobre o forceUpdate e o getDerivedStateFromError.
forceUpdate é um método que diretamente executa uma nova renderização. Embora possa haver poucos casos de uso para ele, normalmente ele deve ser evitado.
getDerivedStateFromError, por outro lado, é um método de ciclo de vida que não faz parte diretamente do ciclo de vida do componente. No caso de um erro em um componente, getDerivedStateFromError é executado e você pode atualizar o estado para refletir o erro que ocorreu. Use esse método copiosamente.
O seguinte trecho de código do CodePen mostra as etapas na fase de montagem:
Entender o ciclo de vida do componente e seus métodos no React permitirá que você mantenha o fluxo de dados adequado e manipule os eventos em sua aplicação.
2. Componentes de Alta ordem
Provavelmente você já deve ter usado os componentes de alta ordem ou HOCs (Higher-Order Components). A função de connect do Redux, por exemplo, é uma função que retorna um HOC. Mas o que exatamente é um HOC?
Dos documentos do React:
Um componente de alta ordem é uma função que recebe um componente e retorna um novo componente.
Voltando à função connect do Redux, podemos ver o seguinte trecho de código:
const hoc = connect(state => state)
const WrappedComponent = hoc(SomeComponent)Quando chamamos connect, obtemos um HOC de volta que podemos usar para envolver um componente. A partir daí, apenas passamos nosso componente para o HOC e começamos a usar o componente que nosso HOC retorna.
O que os HOCs nos permitem fazer é abstrair a lógica compartilhada entre os componentes em um único componente mais abrangente.
Um bom caso de uso para um HOC é a autorização. Você pode escrever seu código de autenticação em todos os componentes que precisam dele. Isso iria rapidamente e desnecessariamente inchar seu código.
Vejamos como você pode fazer a autenticação de componentes sem HOCs:
Usando HOCs, você pode fazer algo assim:
Aqui está um snippet do CodePen para o código acima.
Olhando para o código acima, você pode ver que somos capazes de manter nossos componentes muito simples enquanto ainda fornecemos autenticação para eles. O componente AuthWrapper contém toda a lógica de autenticação em um componente unificador. Tudo o que este componente faz é pegar uma propriedade chamada isLoggedIn e retorna o WrappedComponent ou uma tag de parágrafo com base se a propriedade é verdadeira ou falsa.
Como você pode ver, os HOCs são extremamente úteis porque nos permitem reutilizar código e remover o inchaço do mesmo. Vamos ver mais disso na prática com em breve!
3. React State e setState()
A maioria de vocês provavelmente já utilizaram o estado do React, nós até usamos em nosso exemplo de HOC. Mas é importante entender que, quando há uma alteração de estado, o React fará uma renderização nesse componente (a menos que você especifique em shouldComponentUpdate para que não ocorra).
Agora vamos falar sobre como mudamos o estado do componente. A única maneira de alterar o estado é através do método setState. Esse método pega um objeto e o mescla no estado atual. Além disso, há algumas coisas que você também deve saber sobre isso.
Primeiro, setState é assíncrono. Isso significa que o estado não será atualizado exatamente depois que você chamar o setState, e isso pode levar a um comportamento inesperado.
Olhando para a imagem acima, você pode ver que nós chamamos setState e depois o estado noconsole.log logo depois. Nossa nova variável de counter deve ser 1, mas na verdade é 0. Então, se quisermos acessar o novo estado depois que o setState atualizar o estado?
Isso nos leva à próxima parte que devemos saber sobre o setState e que pode ser uma função de “callback”. Vamos arrumar nosso código!
Ótimo, funciona, agora está tudo ok? Não exatamente. Na verdade, não estamos usando o setState corretamente neste caso. Em vez de passar um objeto para setState, vamos criar uma função pra ele. Normalmente, esse padrão é usado quando você usa o estado atual para definir o novo estado, como no exemplo acima. Se você não estiver fazendo isso, fique à vontade para continuar passando um objeto para setState. Vamos atualizar nosso código novamente!
Aqui está o CodePen para o código do setState acima.
Qual é o sentido de criar uma função em vez de um objeto? Como o setState é assíncrono, confiar nele para criar nosso novo valor terá algumas armadilhas. Por exemplo, no momento em que o setState é executado, outro setState pode ter alterado o estado. Criar uma função no setState nos dá dois benefícios. O primeiro é que nos permite levar uma cópia estática do nosso estado que nunca mudará por conta própria. A segunda é que ele irá enfileirar as chamadas do setState para que elas sejam executadas em ordem.
Basta dar uma olhada no exemplo a seguir, onde tentamos incrementar o contador em 2 usando duas chamadas setState consecutivas:
O código acima é o que vimos anteriormente, enquanto temos a correção abaixo.
CodePen para o código acima.
Na primeira imagem, ambas as funções setState usam diretamente this.state.counter e como aprendemos anteriormente, this.state.counter ainda será zero após o primeiro setState ser chamado. Assim, obtemos 1 em vez de 2 porque ambas as funções setState estão atribuindo o valor do contador para 1.
Na segunda imagem, criamos uma função para o setState que garante que ambas as funções do setState executem em ordem. Além disso, a função contém uma cópia do estado, em vez de usar o estado atual não atualizado. Agora temos o resultado esperado de 2.
E isso é tudo que você precisa saber sobre o estado no React!
4. React Context
Isso nos leva agora ao React context, que é apenas um estado global para os componentes.
A API do React context nos permite criar objetos de contexto global que podem ser acessados de qualquer componente que você criar. Isso permite que você compartilhe dados sem ter que passar propriedades para baixo na árvore componentes.
Então, como usamos o context?
Primeiro crie um objeto de contexto:
const ContextObject = React.createContext({ foo: “bar” })
A documentação do React descreve a configuração do context da seguinte forma:
MyClass.contextType = MyContext;
No entanto, no CodePen (React 16.4.2), isso não funcionou. Em vez disso, vamos usar um HOC para consumir contexto de maneira semelhante ao que Dan Abramov recomenda.
O que estamos fazendo é envolver nosso componente com o componente Context.Consumer e passar o context como uma propriedade.
Agora podemos escrever algo como:
E nós teremos acesso a foo do nosso objeto context das propriedades.
Como podemos mudar o contexto, você deve estar se perguntando. Infelizmente, é um pouco mais complicado, mas podemos usar um HOC novamente e fazer da seguinte forma:
Vamos analisar isso. Primeiro, pegamos o estado de inicial do contexto, o objeto que passamos para React.createContext() e o definimos como o estado do componente do HOC. Em seguida, definimos quaisquer métodos que usaremos para alterar nosso estado. Por fim, envolvemos nosso componente no componente Context.Provider. Passamos em nosso estado e a função como o valor da propriedade. Agora, qualquer componente filho receberá essas informações no contexto quando envolvida com o componente Context.Consumer.
Colocando tudo junto (HOCs omitidos):
Agora nosso componente filho tem acesso ao contexto global. E tem a capacidade de alterar o atributo foo no estado para baz.
Aqui está o link do CodePen com o código completo.
5. Mantenha-se atualizado com o React!
Este último conceito é provavelmente o mais fácil de entender. É simplesmente acompanhar os últimos lançamentos do React. O React fez algumas mudanças sérias ultimamente e continuará crescendo e se melhorando.
Por exemplo, no React 16.3, certos métodos do ciclo de vida foram depreciados, no React 16.6 obtemos componentes assíncronos e no 16.7 temos os hooks que visam substituir componentes de classes definitivamente.
Conclusão
Obrigado pela leitura! Espero que tenham gostado e aprendido muito sobre React. Embora eu espere que você tenha aprendido muito apenas com a leitura, recomendo que você experimente todos esses recursos/peculiaridades. Ler é uma coisa, mas a única maneira de dominar é fazer você mesmo!
Por último, continue codificando. Aprender uma nova tecnologia pode parecer assustador, mas a cada coisa que você aprende, você se torna um especialista em React.
Se você tiver algum comentário, pergunta ou acha que eu deixei alguma dica de fora, fique à vontade para deixá-la abaixo nos comentários.
