Por que você deve refatorar seu código

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. Ademais, você nunca precisará se preocupar em esquecer-se de fazer alterações em alguns lugares. Ademais, 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 é?

Ademais, 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 (      
        ...         this.setState({ flag: true })} />        ...      
    );  }

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!