🙋🏽 🧜🏼 🚣🏻 Reaja às práticas recomendadas e dicas que todo desenvolvedor deve conhecer. Parte 1 🐷 🖤 🏾

Olá Habr! Apresento a você a tradução do artigo "Práticas e dicas sobre melhores práticas para reagir que todo desenvolvedor de reagentes deve saber, parte 1", de Alex Devero.

imagem

O React é uma das bibliotecas mais populares para criar interfaces de usuário interativas. Neste artigo, mostrarei alguns exemplos das práticas recomendadas do React que ajudarão você a se tornar um desenvolvedor melhor. Confira estas instruções para melhorar a escrita do código React.

Conteúdo:

Mantenha seus componentes pequenos
Evite empilhar componentes
Reduza o uso de componentes com estado
Use componentes funcionais com ganchos e notas em vez de componentes nas classes
Não use adereços no estado original.

Epílogo: Reaja às melhores práticas e dicas que todo desenvolvedor deve conhecer - parte 1

1. Mantenha seus componentes pequenos

Manter os componentes pequenos é uma das melhores práticas da React que podem fazer maravilhas. A implementação de apenas essa prática aparentemente simples pode ajudá-lo a escrever um código mais limpo e mais sustentável. Sem mencionar que pode ajudar a manter a razão, ou pelo menos o que resta.

Há uma regra prática comprovada que você pode usar. Dê uma olhada no método de renderização. Se tiver mais de 10 linhas, provavelmente o seu componente é muito grande e é um bom candidato para refatorar e dividir em vários componentes menores. Lembre-se de que uma das idéias para usar o React, ou parte de sua filosofia, é reutilizar o código.

O objetivo é criar trechos de código que você escreve uma vez e usá-los várias vezes quando necessário. Desse ponto de vista, não faz sentido combinar todos os seus dados em um componente maciço, um arquivo. E, mesmo que você realmente não se importe com código reutilizável, pense nisso. Quão fácil será o suporte a componentes com centenas de linhas de código?

Esse componente será difícil de manter, depurar e atualizar. Isso também significa que qualquer trabalho com esse componente levará muito mais tempo. Em outras palavras, seu desempenho geral sofrerá. E mais cedo ou mais tarde isso o deixará louco. Ou isso enlouquece seus colegas e colegas de equipe e eles começam a enlouquecer você.

Qualquer que seja a sua escolha, você logo perderá a cabeça e talvez fará inimigos por si mesmo. Não vale a pena. Mantenha seus componentes pequenos. Mantenha amizades, sanidade, tempo e produtividade. Simplifique a depuração, atualização e manutenção do código. Considere um exemplo.

Was

/// // file: index.jsx import React from 'react' const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] class Bookshelf extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <div> <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> </div> ) } } // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

Tornou-se

 /// // file: books-data.js const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] export default booksData /// // file: components/books-table.jsx import React from 'react' class BooksTable extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> ) } } export default BooksTable /// // file: components/search-bar.jsx import React from 'react' class SearchBar extends React.Component { render() { return ( <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> ) } } export default SearchBar /// // file: components/bookshelf.jsx import React from 'react' // Import components import BooksTable from './components/books-table' import SearchBar from './components/search-bar' class Bookshelf extends React.Component { render() { return ( <div> <SearchBar /> <BooksTable books={this.props.books} /> </div> ) } } export default Bookshelf /// // file: index.jsx import React from 'react' // Import components import Bookshelf from './components/bookshelf // Import data import booksData from './books-data' // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

2. Evite empilhar componentes

Cada regra deve ser aplicada com cautela. Isso também se aplica a essas práticas recomendadas do React, especialmente a anterior. Quando se trata de componentes, é muito fácil exagerar e escrever até os menores pedaços de código na forma de componentes. Não faça isso. Não faz sentido transformar cada parágrafo, abranger ou dividir um componente.
Pense antes de começar a dividir cada componente em pequenas partes. Você pode pensar no componente como uma mistura de "HTML", que faz apenas uma coisa, sendo independente, e o usuário o perceberá como um todo. Faz sentido tornar esse pedaço de código um componente? Caso contrário, combine este código. Caso contrário, divida-o.

Vejamos alguns exemplos para ilustrar essa definição de um componente. Um exemplo é o diálogo modal. Este componente pode consistir em muitos elementos pequenos, como divs, títulos, parágrafos de texto, botões, etc. Teoricamente, todos esses elementos podem ser distinguidos em pequenos componentes.

Na prática, isso é inútil. Sim, alguns desses elementos podem existir independentemente um do outro. No entanto, é realmente útil criar um componente que consiste em apenas um parágrafo ou um cabeçalho? O que acontecerá depois? Componente para etiqueta, entrada ou mesmo extensão? Essa abordagem não é sustentável.

Felizmente, há outra maneira de ver isso. Você pode usar a metodologia de design atômico como um guia. No design atômico, tudo é dividido em seis categorias: átomos, moléculas, organismos, modelos, páginas e utilitários. Você começa com os menores elementos, como botões, links, atalhos, entradas, etc. Estes são átomos.

Então você combina os átomos e cria as moléculas. Exemplos de moléculas podem ser um diálogo modal, forma, janela pop-up, menu suspenso, navegação etc. Além disso, você pode combinar uma molécula com outra ou com um átomo e criar um organismo. Um exemplo de organismo é um cabeçalho, uma lista de produtos ou um carrinho de compras. Modelos, páginas e utilitários não são mais importantes.

Como combinar o projeto atômico com esses dois exemplos de práticas recomendadas para componentes do React? Não vamos complicar. Um componente pode ser qualquer coisa além de um átomo, ou seja, molécula, organismo ou mesmo um modelo ou página, se levado ao limite. Nesse sentido, o rótulo, o cabeçalho e o parágrafo não são componentes, porque são átomos.
No entanto, diálogos modais, formulários, pop-ups, listas suspensas etc. são componentes, uma vez que todos se relacionam com moléculas ou com a categoria de um organismo. Ainda existem alguns elementos duvidosos, como um botão. Sim, do ponto de vista da estrutura atômica, é um átomo. No entanto, ele pode existir independentemente, em muitas variações, e ainda funcionar.

Nesses casos, sugiro não pensar nas melhores práticas do React e ser guiado pelos meus instintos internos. No final, é você quem irá trabalhar com o código. O importante é que você esteja confortável. Portanto, não siga cegamente uma lista de práticas recomendadas. E se você trabalha em equipe? Compartilhe seus pensamentos sobre isso com seus colegas.

3. Reduza o uso de componentes com estado

Essa é uma das melhores práticas de React aplicadas há algum tempo. No entanto, essa prática se tornou mais popular com o advento dos ganchos React 16.8.0 e React. Antes disso, quando você queria usar o estado ou qualquer método de ciclo de vida, também precisava usar um componente com estado. Não havia outro caminho.

Hooks mudou isso. Depois de revelados oficialmente, os desenvolvedores do React não estavam mais limitados a componentes com estado, porque precisavam usar o estado. Graças aos ganchos, os desenvolvedores do React agora podem escrever componentes sem estado usando métodos de estado e até mesmo de ciclo de vida conforme desejarem.

Por que isso é importante? Componentes sem estado ou funcionais geralmente são melhores que componentes com estado quando se trata de desempenho. O motivo é que não há métodos de estado ou ciclo de vida. Em outras palavras, menos código para executar, além de transpilar. Obviamente, essa diferença pode ser quase imperceptível, quase invisível, se você estiver trabalhando em um projeto muito pequeno.

No entanto, essas pequenas diferenças podem aumentar conforme o projeto cresce. Pense também em quantas linhas de código um componente com estado requer em comparação com as funcionais. A funcionalidade também é mais curta e geralmente mais fácil de ler. Vejamos o componente do botão, definido como um componente com controle e funções de estado. Qual você gosta mais?

 // Button defined as a stateful component class Button extends React.Component { handleClick = () => { // Do something } render() { return( <button type="button" onClick={this.handleClick}>Click me</button> ) } } // Button defined as a functional component const Button = () => { const handleClick = () => { // Do something } return( <button type="button" onClick={handleClick}>Click me</button> ) }

4. Use componentes funcionais com ganchos e notas em vez de componentes nas classes

Como já discutimos, você não precisa mais usar componentes com estado apenas para usar o estado. Além disso, alguns desenvolvedores do React também acreditam que, no futuro, o React começará a se afastar das classes. Isso é verdade, agora não importa. O importante é que um componente funcional agora possa usar o estado graças aos ganchos.
E segundo, o uso de componentes funcionais tem suas vantagens. TLDR? Não há classe, herança e construtor. Não existe essa palavra-chave. Práticas recomendadas para reagir estritamente. Alta relação sinal / ruído. Componentes inchados e estruturas de dados ruins são mais fáceis de detectar. O código é mais fácil de entender e verificar. E, novamente, o desempenho é melhor.

E mais uma coisa. Muitos desenvolvedores do React se opuseram aos componentes funcionais. Um dos problemas é que você, como desenvolvedor do React, não pode controlar o processo de renderização ao usar um componente funcional. Quando algo muda, o React retorna um componente funcional, independentemente de o próprio componente ter sido alterado.
No passado, a solução era usar um componente puro. O componente limpo fornece a capacidade de comparar estado e adereços. Isso significa que o React pode "verificar" se o conteúdo do componente, acessórios ou o próprio componente foram alterados. Nesse caso, ele retornará. Caso contrário, ele ignorará a nova renderização e reutilizará o último resultado renderizado. Menos renderização significa melhor desempenho.
Com o React 16.6.0, isso não é mais um problema e o argumento contra componentes funcionais não é mais válido. O que mudou o jogo foi um memorando. O memorando trouxe uma comparação superficial com um componente funcional, a capacidade de "verificar" se o conteúdo do componente, adereços ou o próprio componente foi alterado.

Novamente, com base nessa comparação, o React retornará o componente novamente ou reutilizará o resultado da última renderização. Em suma, o memorando permite criar componentes funcionais "limpos". Não há mais motivo para usar componentes completos do estado ou componentes puros. Pelo menos se você não precisar lidar com uma condição difícil.

Nesse caso, considere usar algo mais escalável e gerenciável, como MobX, Redux ou Flux, em vez do estado dos componentes. Outra opção possível seria usar o contexto. De qualquer forma, graças a ganchos e notas, os componentes funcionais são certamente algumas das melhores práticas do React que vale a pena pensar.

5. Não use adereços no estado original

Essa é uma das melhores práticas do React que eu gostaria de conhecer quando comecei a aprender. Então eu não sabia que era uma péssima idéia usar adereços no estado inicial. Por que isso é uma má ideia? O problema é que o construtor é chamado apenas uma vez durante a criação do componente.

Isso significa que, quando você fizer algumas alterações nos acessórios da próxima vez, o estado dos componentes não será atualizado. Ele manterá seu significado anterior. Então, por engano, assumi que os objetos estão sincronizados com o estado. Assim, quando alguns detalhes mudam, o estado muda para refletir essa mudança. Infelizmente, isso não é verdade.

Isso pode não ser um problema se você desejar que o estado receba valores de adereços apenas uma vez durante a renderização inicial e controle o estado dentro do componente. Caso contrário, você pode resolver esse problema com componentDidUpdate. Como o nome diz, esse método de ciclo de vida permite atualizar um componente quando algo muda, como acessórios.

Se você decidir usar esse método, lembre-se de uma coisa. Não estará envolvido na renderização inicial, mas apenas na próxima. Portanto, certifique-se de inicializar o estado do componente com os valores necessários, possivelmente obtidos de adereços. Em seguida, use componentDidUpdate para atualizar esses valores e o componente conforme necessário.

Epílogo: Reaja às melhores práticas e dicas que todo desenvolvedor deve conhecer - parte 1

Parabéns! Você acabou de terminar a primeira parte desta minissérie de artigos sobre as melhores práticas do React. Hoje, você aprendeu sobre cinco práticas que você pode usar para tornar o código do React mais curto, mais simples, melhor, mais rápido e mais fácil de ler e manter. Agora cabe a você implementar a prática com a qual concorda e começar a usá-la.

Na próxima parte, você aprenderá sobre um conjunto diferente de práticas recomendadas e dicas para ajudá-lo a melhorar seu código do React, bem como suas habilidades de programação. Até lá, pegue o que aprendeu hoje e passe algum tempo praticando.

Se você gostou deste artigo, assine.

Originalmente publicado no Alex Devero Blog.