Quais são as melhores práticas para o desenvolvimento em React?

Quando se trata de desenvolvimento em React, é um pouco como construir blocos, mas muito mais complicado. Eu faço o meu próprio projeto React quando sei que, por vezes, um componente não está suficientemente bem escrito, a manutenção do mesmo é simplesmente fatal. Por exemplo, a gestão do estado de um componente é caótica, e as alterações são como o desmantelamento de bombas, por medo de uma explosão acidental. Por isso, o desenvolvimento em React precisa mesmo de uma prática eficaz.

Princípios de conceção de componentes

No que diz respeito à conceção de componentes, gosto particularmente da ideia de "responsabilidade única". Já alguma vez encontraste um componente que faz tudo? Sabe, o supercomponente que é responsável pela renderização, busca de dados, gerenciamento de estado e até mesmo lógica de negócios ao mesmo tempo. Este tipo de componente pode parecer uma grande coisa no início de um projeto, mas à medida que o projeto cresce, o custo de o manter aumenta exponencialmente.

A título de exemplo, refactivei recentemente um componente do centro pessoal do utilizador. O código original juntava a lógica de obtenção, edição e gravação da informação do utilizador num único componente, com mais de 800 linhas de código. Após a refacção, dividi-o em três partes: UserProfile (apresentação), UserForm (edição), useUserData (Hook), as responsabilidades de cada parte são muito claras e é muito mais fácil de testar.

A arte da gestão de condições

O gerenciamento de estado é definitivamente o lugar mais fácil de pisar no desenvolvimento do React. Lembro-me de uma entrevista, o candidato disse que colocou todo o estado do projeto na gestão Redux, eu estava tipo, este projeto mais tarde para manter como doloroso ah.

A minha experiência é: não use estado global para problemas que podem ser resolvidos com estado local, e apenas considere usar bibliotecas de contexto ou de gestão de estado quando o estado precisa realmente de ser partilhado entre vários componentes. Além disso, usar o useReducer para lidar com lógica de estado complexa é muitas vezes muito mais claro do que usar o useState diretamente.

Otimização do desempenho em ação

A otimização do desempenho em React é um tópico interessante. Descobri que muitos desenvolvedores estão pensando em useMemo e useCallback quando eles aparecem, mas na verdade o que é mais importante pode ser a otimização da estrutura do componente. Por exemplo, a renderização da lista para as habilidades de atribuição de chaves, vi muitos projetos diretamente com um índice de matriz como chave, o que nos cenários de grande volume de dados levará a sérios problemas de desempenho.

Há um caso real: temos um projeto de comércio eletrónico, a página da lista de produtos fica particularmente bloqueada ao renderizar mais de 1000 produtos. Através de uma análise, descobrimos que o problema reside na estratégia de re-renderização do componente. A solução de otimização é: 1) garantir que cada item de produto tem uma chave única; 2) mover a lógica de cálculo complexa para useMemo; 3) usar React.memo para envolver o componente de visualização pura. Estes três eixos diminuíram e o desempenho melhorou em quase 70%.

Quando se trata das melhores práticas do React, há muito mais para falar, como a integração do TypeScript, estratégia de testes, design da estrutura do catálogo e assim por diante. Mas eu acho que a coisa mais importante a lembrar: React é apenas uma ferramenta, a chave é encontrar o método de desenvolvimento mais adequado de acordo com a situação real do projeto. Afinal, não existe uma "melhor prática" única para todos, apenas a mais adequada para a "melhor prática" do projeto atual.