Construir aplicativos escalonáveis ​​no React requer mais do que apenas uma lógica de negócios sólida. A arquitetura dos seus componentes desempenha um papel significativo na manutenção, no desempenho e na flexibilidade do seu aplicativo à medida que cresce. Uma das tarefas fundamentais em muitas aplicações web é o tratamento de listas de dados. Seja renderizando listagens de produtos, tabelas ou painéis, você frequentemente encontrará cenários que exigem estruturas de lista repetíveis e reutilizáveis.

Ao criar componentes de lista reutilizáveis, você pode reduzir significativamente a complexidade de sua base de código e, ao mesmo tempo, melhorar a capacidade de manutenção e a escalabilidade. Esta postagem do blog explorará como construir componentes de lista reutilizáveis ​​no React, por que isso é importante para dimensionar aplicativos e fornecerá exemplos de código extensos para ajudar a orientá-lo durante o processo.

Por que a reutilização é importante para dimensionar aplicativos React

A capacidade de reutilização é fundamental quando se trata de dimensionar aplicativos React. Em vez de duplicar o código para lidar com diferentes componentes de lista em seu aplicativo, a criação de componentes de lista reutilizáveis ​​permite abstrair a lógica comum e a estrutura da UI em componentes independentes. Isso permite que seus componentes React cresçam modularmente e evita a duplicação de código, o que pode levar a possíveis bugs e problemas de manutenção à medida que seu aplicativo se expande.

Ao criar componentes reutilizáveis, você pode passar vários adereços para controlar a renderização de listas, tornando seu aplicativo mais dinâmico e flexível sem reescrever a mesma lógica para cada caso de uso. Essa abordagem não apenas torna seu aplicativo escalonável, mas também aprimora a experiência do desenvolvedor, simplificando a legibilidade e a manutenção do código.

Conceitos básicos de componentes de lista reutilizáveis

Para construir componentes de lista reutilizáveis ​​escaláveis, você precisa entender vários conceitos do React:

Props e State: permitem que você passe dados para seus componentes e controle o comportamento interno de seus componentes, respectivamente.

Métodos de array: métodos como .map(), .filter() e .reduce() são essenciais para transformar arrays em componentes React.

Composição sobre herança: No React, o padrão de composição é preferível à herança. Você pode criar UIs complexas combinando componentes menores e reutilizáveis.

IU orientada por props: os componentes da lista reutilizável devem ser controlados por props. Isso permite que você passe diferentes dados, lógica de renderização e até estilos de componentes pais.

Exemplo 1: um componente de lista reutilizável simples

Vamos começar criando um componente de lista simples e reutilizável que pode aceitar uma matriz de itens como suporte e renderizá-los dinamicamente:

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

Neste exemplo, SimpleList aceita uma propriedade items, que é um array. Usamos a função .map() para iterar pelo array e renderizar cada item dentro de uma lista não ordenada (

). Cada item é envolvido em um elemento
• . A propriedade key garante que o React possa atualizar o DOM com eficiência quando a lista for alterada.

  Exemplo de uso:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
    );
  };
  
  export default App;
  

  Este exemplo renderiza uma lista básica de frutas. O componente é flexível o suficiente para que você possa passar qualquer conjunto de dados para ele.

  Aprimorando a capacidade de reutilização do componente de lista

  Embora o exemplo acima seja funcional, é muito limitado. Em aplicativos do mundo real, muitas vezes você precisa lidar com requisitos mais complexos, como renderizar itens de lista condicionalmente, aplicar estilos personalizados ou adicionar ouvintes de eventos a itens individuais.

  Vamos tornar nosso SimpleList mais reutilizável, permitindo lógica de renderização personalizada por meio de uma propriedade de renderização.

  Exemplo 2: usando acessórios de renderização para renderização de lista personalizada

  Render props são um padrão no React que permite controlar o que é renderizado dentro de um componente. Veja como você pode usar esse padrão para permitir a renderização personalizada de itens de lista:
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  Nesse caso, o componente ReusableList aceita uma prop renderItem, que é uma função que pega um item e retorna JSX. Isso fornece uma maneira flexível de controlar como cada item da lista é renderizado.

  Exemplo de uso:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  Neste exemplo, a propriedade renderItem nos permite personalizar como cada usuário é exibido. Agora podemos reutilizar o mesmo componente de lista para qualquer estrutura de dados, renderizando-o de acordo com o caso de uso específico.

  Exemplo 3: Tornando os componentes da lista extensíveis com componentes de ordem superior

  Outro padrão poderoso no React é o Componente de Ordem Superior (HOC). Um HOC é uma função que pega um componente e retorna um novo componente com funcionalidade adicional.

  Por exemplo, se quiséssemos aprimorar nossa ReusableList com comportamentos adicionais, como busca de dados ou renderização condicional, poderíamos usar um HOC.
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  Aqui, o withLoading HOC adiciona comportamento de carregamento a qualquer componente. Vamos aplicá-lo à nossa ReusableList:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  Neste exemplo, o withLoading HOC envolve ReusableList, adicionando gerenciamento de estado de carregamento a ele. Este padrão promove a reutilização de código, aprimorando os componentes com lógica adicional sem modificar o componente original.

  Exemplo 4: Componentes de lista avançada com ganchos

  Com os ganchos React, podemos levar os componentes da lista reutilizável a outro nível, integrando a lógica com estado diretamente nos componentes. Vamos construir uma lista reutilizável que possa lidar com paginação.
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  O gancho usePagination encapsula a lógica de paginação. Agora podemos usar esse gancho em nosso componente de lista.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  Exemplo de uso:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
        
  {item}
  }
        />
      
    );
  };
  

  Este exemplo demonstra uma lista paginada onde os usuários podem navegar pelas páginas de itens. O gancho lida com toda a lógica de paginação,

  tornando-o reutilizável em diferentes componentes.

  Conclusão

  Construir componentes de lista reutilizáveis ​​no React é uma prática fundamental para criar aplicações escaláveis. Ao abstrair a lógica comum, usando padrões como adereços de renderização, componentes de ordem superior e ganchos, você pode criar componentes de lista flexíveis, extensíveis e de fácil manutenção que se adaptam a diferentes casos de uso.

  À medida que seu aplicativo React cresce, a adoção de componentes reutilizáveis ​​não apenas simplifica sua base de código, mas também melhora o desempenho, reduz a redundância e permite a iteração rápida em novos recursos. Esteja você lidando com listas simples ou requisitos de UI mais complexos, investir tempo na criação de componentes reutilizáveis ​​terá retorno no longo prazo.

  Referências

  Reagir Documentação Oficial
  
  Adereços de renderização React
  
  Componentes de ordem superior do React
  
  Ganchos de reação