Por que você deve refatorar seu código


Levante a mão se algum dos seguintes itens lhe parecer familiar: pense na formatação do código. Livre-se de desnecessários

areia s. Use componentes funcionais do React. Tente evitar a função de seta na renderização. E não se repita!

Antes de ir direto para a refatoração, preciso que você responda a uma pergunta simples: o que significa desenvolver um aplicativo? Geralmente, isso significa produzir um software que atenda aos requisitos implementando certos recursos.

E como nós fazemos isso? Coletamos os requisitos do cliente, estimamos e desenvolvemos os recursos um por um. Direita? Quase.

Não se esqueça dos erros

Sim, ocorrem erros. Dependendo do processo de desenvolvimento, da complexidade do software, da pilha técnica e de muitos outros parâmetros, o número de bugs pode variar.

Uma empresa não pode arcar com problemas críticos na produção. Para minimizar problemas, você deve prestar atenção especial ao Processo de controle de qualidade. Mas a teoria do controle de qualidade afirma que geralmente é impossível executar 100% de cobertura de teste de seus aplicativos e se preparar para todos os cenários possíveis.

Mesmo assim, para alcançar ótimos resultados, as equipes gastam muito tempo testando software e solucionando problemas. Essa é uma parte necessária do processo que cada cliente deve entender e priorizar.

Cuidado com a dívida técnica

No entanto, esta moeda tem um outro lado. Quanto mais tempo o processo de desenvolvimento e teste demorar, mais dívida técnica você incorre.

Então, o que significa “dívida técnica”? Dívida técnica refere-se a todos os problemas relacionados à qualidade que você tem no seu código. Questões que exigirão o gasto de recursos adicionais no futuro.

Você incorre em dívidas técnicas por vários motivos, como:

  1. A empresa se esforça para lançar novos recursos mais rapidamente.
  2. O teste é insuficiente.
  3. Os requisitos estão mudando rapidamente.
  4. Os desenvolvedores são inexperientes.

Dívida técnica deve ser documentada. Se você não deixar as tarefas no código, provavelmente esquecerá o problema. E mesmo se você tiver tempo para isso no futuro, não se lembrará de corrigi-lo.

Compreender a importância da refatoração

Normalmente, você precisa dedicar algum tempo refatorando o código existente para resolver problemas de qualidade do código e, assim, reduzir a dívida técnica.

Mas o que é refatoração? É o processo de reestruturar o código existente sem alterar seu comportamento externo. E isso é algo que pode ser difícil de entender para as pessoas de negócios que gerenciam o projeto.

– Obteremos novos recursos?

– Não.

– Vamos pelo menos consertar alguns bugs?

– Também não.

– O que vamos conseguir então?

– …

Trabalhar com dívidas técnicas ajuda a evitar bugs. E para adicionar correções ou alterações ao projeto, sempre precisamos ler o código antigo.

Portanto, refatorar e manter uma boa qualidade de código nos ajudará a manter o desenvolvimento em um bom ritmo.

Às vezes, uma empresa pode não precisar disso. Por exemplo, se você estiver trabalhando em um protótipo ou Prova de conceito, ou se houver prioridades de negócios que não possam ser ajustadas, você pode fazer isso sem refatorar.

Mas na maioria dos casos, cortar a refatoração não é uma coisa sábia a se fazer. Você pode gastar bastante tempo refatorando se seus desenvolvedores são perfeccionistas, mas isso também não faz sentido.

Portanto, você precisa encontrar um equilíbrio. Você não deve gastar mais tempo refatorando do que economizará no futuro.

Como começar a refatorar seu código de reação

Pense em formatação de código

Algumas pessoas adicionam vírgulas finais e outras não. Alguns usam aspas simples, enquanto outros usam aspas duplas para uma string.

Se você trabalha em equipe, manter o estilo de código comum pode ser realmente difícil. E a inconsistência no estilo do código pode fazer com que seu código pareça sujo e difícil de ler.

Portanto, se você nunca pensou em usar ferramentas de formatação de código, é hora de fazê-lo. Uma das ferramentas de refatoração do React mais populares e fáceis de usar é Mais bonito. Você pode simplesmente adicioná-lo ao projeto, e ele cuidará da formatação.

O Prettier possui algumas configurações de estilo padrão. Mas você pode alterá-los de acordo com suas preferências, adicionando o arquivo .prettierrc às suas regras de formatação.

Uma boa configuração do .prettierrc pode ser assim:

{ "printWidth": 120,  "singleQuote": true, “trailingComma”: “none” }

Você também pode reformatar automaticamente o código antes de confirmar ganchos pré-confirmação.

Livre-se de desnecessários

‘areia É

Quando o React 16.2 foi lançado em novembro de 2017, muitos desenvolvedores do React suspiraram de alívio. Antes disso, para um componente retornar uma lista de filhos, era necessário agrupar os filhos em um elemento extra, como

ou .

Porém, com o React 16.2, recebemos suporte aprimorado para retornar os filhos dos componentes. Agora, os desenvolvedores podem usar os chamados fragmentos. Eles parecem tags JSX vazias (<>… ) Com a ajuda de fragmentos, você pode passar uma lista de filhos para o componente sem adicionar nós extras ao DOM.

Pense em nomes

Não seja preguiçoso quando estiver pensando em nomes para componentes e variáveis. Todo nome deve ser auto-explicativo.

Você já viu trechos de código como este?

const modifyData = data.map(x => [x.a, x.b]))

O que isso faz? Se você não consegue entender o objetivo de uma variável a partir do nome – é hora de renomeá-la!

Isso ajudará você e sua equipe a entender a lógica mais facilmente. Também eliminará o tempo gasto fazendo alterações nos componentes existentes no futuro.

Não se repita

O princípio DRY foi formulado pela primeira vez no livro O programador pragmático. Ele afirma que “todo conhecimento deve ter uma representação única, inequívoca e autorizada dentro de um sistema”. Em outras palavras, você precisa colocar blocos de códigos repetitivos em componentes reutilizáveis ​​separados.

Tornar seu código DRY tem muitos benefícios. Isso pode economizar muito tempo. Se você precisar alterar esse código no futuro, você fará isso apenas em um só lugar. Além disso, você nunca precisará se preocupar em esquecer-se de fazer alterações em alguns lugares. Além disso, você manterá os componentes mais limpos e aumentará a legibilidade do código.

Para manter seus componentes secos e pequenos, você pode seguir duas regras simples:

  1. Se você usar um bloco de código mais de duas vezes, é hora de extraí-lo.
  2. Se você exceder um número predefinido de linhas em um componente (por exemplo, 100 linhas), provavelmente existe uma lógica que pode ser extraída. Divida-o em componentes menores por funcionalidades.

Use componentes funcionais acima da classe

Com a introdução de Hooks no React 16.8, recebemos acesso aos recursos da classe React em componentes funcionais. Os ganchos resolvem vários problemas frequentemente encontrados pelos desenvolvedores nos últimos anos.

Por exemplo, o gancho useEffect, como sugerem os documentos do React, permite agrupar a lógica do componente em pequenas funções com base em quais partes estão relacionadas (em vez de agrupar a lógica com base nos métodos do ciclo de vida). Isso nos ajuda a reestruturar melhor nossa lógica.

Em suma, refatorar os componentes do React com a ajuda de ganchos torna o código mais limpo e reduz a quantidade de código que você precisa escrever.

Aqui está um exemplo muito básico: buscar os dados após a montagem do componente e buscá-los novamente com base nos adereços atualizados.

Em um componente de classe, escreveríamos algo como isto:

class BookList extends React.Component { 	componentDidMount() {     	this.props.fetchBooks(this.props.bookGenre); 	} 	componentDidUpdate(prevProps) {     	if (prevProps.bookGenre !== this.props.booksGenre) {         		this.props.fetchBooks(this.props.bookGenre);     		} 	}      // ... }  

Com os ganchos React, ficará assim:

const BookList = ({bookGenre, fetchBooks}) => { 	useEffect(() => {     		fetchBooks(bookGenre); 	}, [bookGenre]); // ... }

A lógica de busca de livros agora está reunida em um só lugar. O gancho useEffect será executado após a montagem sempre que os acessórios ([bookGenre]) entre colchetes mudam. Muito mais limpo, não é?

Além disso, você pode extrair lógica com estado semelhante e reutilizá-la em diferentes componentes, criando seus ganchos personalizados. Você pode ler mais sobre ganchos personalizados no site oficial Reagir documentação.

Tente evitar as funções de seta na renderização

Você já viu esse código?

render() {    return (      
...
); }

Claro que você tem. Qual é o problema com isso? Sempre que um componente é renderizado, uma nova instância dessa função é criada.

Não é grande coisa se o componente for renderizado uma ou duas vezes. Mas em outros casos, isso pode realmente afetar o desempenho. Portanto, se você se importa com o desempenho, declare a função antes de usá-la na renderização:

changeFlag = () => this.setState({ flag: true })   render() {    return (      
...
); }

Faça o pacote menor

Se você estiver usando uma biblioteca de terceiros, não deverá carregá-la se não houver necessidade. Às vezes, você pode encontrar uma importação que use apenas um método a partir daí, como:

import lodash form 'lodash'  ...  const certainProps = lodash.pick(userObject, ['name', 'email']);  ...

Em vez disso, é melhor usar o seguinte:

import pick from 'lodash/pick' ... const certainProps = pick(userObject, ['name', 'email']); ...

Agora você não carrega a biblioteca inteira, apenas o método necessário aqui.

Para finalizar

Vamos revisar as etapas que você deve executar para refatorar seu código do React:

  • Pense em formatação de código
  • Livre-se de desnecessários
    ‘areia É
  • Pense em nomes
  • Não se repita
  • Use componentes funcionais acima da classe
  • Tente evitar as funções de seta na renderização
  • Faça o pacote menor

No entanto, a refatoração ideal é a refatoração que não ocorre. Como desenvolvedor e, especialmente, como líder técnico, você deve pensar em muitos passos à frente e tentar produzir código de alta qualidade. Você também deve realizar revisões regulares do código, não apenas dentro de uma equipe, mas também entre as equipes.

Você tem uma ideia para um projeto React?

Minha empresa KeenEthics é uma reação experiente Companhia de desenvolvimento. Se você estiver pronto para mudar o jogo com seu projeto de software, sinta-se à vontade para solicitar uma estimativa.

Você pode ler mais artigos semelhantes no meu Keen Blog. Permita-me sugerir O valor do teste do usuário ou Angular vs React: o que escolher para o seu aplicativo?

Mais importante, gostaria de dizer “obrigado” a Yaryna Korduba e Max Fedas, ambos desenvolvedores de React de destaque, por serem coautores deste artigo, bem como pelos leitores por fazê-lo até o fim!



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *