Separating⛓️ Lógica de negócios 🧠dos componentes da interface do usuário 🔡 no React 18

React é uma biblioteca JavaScript popular para a construção de interfaces de usuário, e tem sofrido melhorias significativas em versões recentes. Com o React 18, os desenvolvedores agora têm ferramentas ainda mais poderosas para separar a lógica de negócios dos componentes da interface do usuário de forma eficaz. Este artigo explorará os benefícios de desacoplar a lógica de negócios dos componentes da interface do usuário e demonstrará como alcançá-la usando os novos recursos do React 18.

• Por que separar a lógica de negócios dos componentes da interface do usuário?
• Novos recursos do React 18 para separação da lógica de negócios.
• Separando a Lógica de Negócios: Um Guia Passo-a-Passo.
• Técnicas avançadas para separação de lógica de negócios em React 18
• Conclusão
• Referências

Separar a lógica de negócios dos componentes da interface do usuário traz várias vantagens para os seus aplicativos React:

• Reutilização de código: Quando a lógica empresarial é isolada, torna-se mais fácil reutilizar componentes em diferentes partes da aplicação ou mesmo noutros projectos.
• Testes: Os testes tornam-se mais simples, uma vez que pode escrever testes unitários para a lógica empresarial independentemente dos componentes da IU. Isso melhora a cobertura dos testes e a qualidade geral do código.
• Facilidade de leitura e manutenção: A dissociação da lógica empresarial dos componentes da IU resulta num código mais limpo e mais fácil de manter. Torna-se mais fácil compreender as responsabilidades de cada parte da aplicação.
• Escalabilidade: À medida que a sua aplicação cresce, a separação de preocupações permite que os programadores trabalhem em diferentes partes da base de código simultaneamente, sem conflitos.

Com o React 18, dois recursos principais permitem que os desenvolvedores separem a lógica comercial de forma eficaz:

Ganchos React

O React Hooks, introduzido no React 16.8, fornece uma maneira de usar o estado e outros recursos do React sem escrever componentes de classe. Com hooks como useState e useEffectSe quiser utilizar o componente de desenvolvimento, os programadores podem encapsular a lógica comercial e reutilizá-la em todos os componentes.

Suspense com o Modo Concorrente

O React 18 traz melhorias no Modo Concorrente e no Suspense. O Modo Concorrente permite que o React trabalhe em várias tarefas simultaneamente, proporcionando melhor desempenho. O Suspense permite a busca de dados declarativos e a divisão de código, facilitando o manuseio de operações assíncronas nos seus componentes.

Vamos percorrer um guia passo a passo sobre como separar a lógica de negócios dos componentes de IU em um aplicativo React 18.

Passo 1: Identifique a lógica de negócios

Identifique as partes dos seus componentes que lidam com a lógica empresarial. Normalmente, são operações que gerem dados, estado ou executam chamadas de API.

Etapa 2: Crie ganchos personalizados

Crie hooks personalizados para encapsular a lógica comercial identificada. Os hooks personalizados são funções que começam com use e pode utilizar outros hooks internamente.

Exemplo de código (gancho personalizado):

// useUserData.js
import { useState, useEffect } from 'react';
export function useUserData() {
const [userData, setUserData] = useState([]);
useEffect(() => {
// Fetch user data from the API and update the state
fetch('https://api.example.com/users')
.then((response) => response.json())
.then((data) => setUserData(data))
.catch((error) => console.error('Error fetching data:', error));
}, []);
return userData;
}

Etapa 3: Use ganchos personalizados em componentes

Utilize os ganchos personalizados nos componentes da interface do usuário para acessar a lógica e os dados comerciais. Isso mantém os seus componentes focados na renderização, enquanto os hooks lidam com a lógica subjacente.

Exemplo de código (usando hooks personalizados no componente):

// UserList.js
import React from 'react';
import { useUserData } from './useUserData';
function UserList() {
const userData = useUserData();
return (
<div>
<h1>User List</h1>
<ul>
{userData.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}

Etapa 4: Divisão de código com Suspense

Com o Suspense, pode dividir o código e carregar preguiçosamente componentes que exigem a obtenção assíncrona de dados ou cálculos dispendiosos. Isso separa ainda mais as preocupações e melhora o desempenho da sua aplicação.

Exemplo de código (divisão de código com Suspense):

// App.js
import React, { Suspense } from 'react';
const UserList = React.lazy(() => import('./UserList'));
function App() {
return (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<UserList />
</Suspense>
</div>
);
}

Na seção anterior, abordamos o básico da separação da lógica de negócios dos componentes da interface do usuário usando os novos recursos do React 18. Agora, vamos explorar algumas técnicas avançadas que levam essa separação para o próximo nível.

1. Composição de ganchos personalizados

Um aspeto poderoso dos hooks personalizados é o facto de poderem ser compostos para criar uma lógica mais complexa. Ao combinar vários hooks personalizados, pode criar uma lógica comercial sofisticada, mantendo os seus componentes de IU limpos e focados.

Exemplo de código (composição de hooks personalizados):

// useUserData.js
import { useState, useEffect } from 'react';
export function useUserData() {
const [userData, setUserData] = useState([]);
useEffect(() => {
// Fetch user data from the API and update the state
fetch('https://api.example.com/users')
.then((response) => response.json())
.then((data) => setUserData(data))
.catch((error) => console.error('Error fetching data:', error));
}, []);
return userData;
}
// useFilteredUserData.js
import { useUserData } from './useUserData';
export function useFilteredUserData(searchTerm) {
const userData = useUserData();
// Filter user data based on the search term
const filteredData = userData.filter((user) =>
user.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return filteredData;
}

Com o useFilteredUserData hook, pode agora obter dados de utilizador filtrados com base num termo de pesquisa e reutilizar a lógica de pesquisa de useUserData. Esta abordagem de composição mantém a lógica modular e reutilizável entre componentes.

2. Ganchos personalizados para efeitos secundários

Por vezes, a sua lógica empresarial pode envolver efeitos secundários para além da obtenção de dados, como a gestão de temporizadores ou a interação com APIs externas. Ganchos personalizados podem encapsular esses efeitos colaterais e garantir que eles sejam tratados de forma consistente entre os componentes.

Exemplo de código (gancho personalizado para temporizador):

// useTimer.js
import { useState, useEffect } from 'react';
export function useTimer(initialTime = 0) {
const [time, setTime] = useState(initialTime);
useEffect(() => {
const interval = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return time;
}

Agora, pode incorporar facilmente a funcionalidade do temporizador em qualquer componente sem se preocupar com a gestão do intervalo.

3. Contexto para a gestão global de estados

Para o gerenciamento de estado que precisa ser compartilhado entre vários componentes, a API Context do React 18 pode ser aproveitada. Ao criar um contexto para a sua lógica de negócios, você pode acessar o estado e as ações de qualquer componente dentro do contexto.

Exemplo de código (usando contexto para gerenciamento de estado):

// UserDataContext.js
import React, { createContext, useContext } from 'react';
import { useUserData } from './useUserData';
const UserDataContext = createContext();
export function UserDataProvider({ children }) {
const userData = useUserData();
return (
<UserDataContext.Provider value={userData}>
{children}
</UserDataContext.Provider>
);
}
export function useUserDataContext() {
return useContext(UserDataContext);
}

Ao usar UserDataContext e o useUserDataContext hook, pode aceder aos dados do utilizador a partir de qualquer componente dentro do UserDataProvider sem perfuração de suporte.

4. Componentes de ordem superior (HOCs) para preocupações transversais

Nos casos em que determinada lógica precisa de ser aplicada a vários componentes, podem ser utilizados componentes de ordem superior (HOCs). Os HOCs são funções que recebem um componente e devolvem um novo componente com adereços ou lógica adicionais.

Exemplo de código (HOC para Styling):

// withStyles.js
import React from 'react';
function withStyles(WrappedComponent) {
return function WithStyles(props) {
return (
<div style={{ color: 'blue' }}>
<WrappedComponent {...props} />
</div>
);
};
}
// Usage
const MyComponent = ({ name }) => <div>Hello, {name}!</div>;
const StyledComponent = withStyles(MyComponent);

O Componente com estilo agora aplica automaticamente os estilos definidos ao componente MeuComponente, eliminando a necessidade de repetir as declarações de estilo em vários sítios.

Ao aproveitar os novos recursos do React 18, incluindo hooks personalizados, Suspense e API de contexto, os desenvolvedores podem implementar técnicas avançadas para separar a lógica de negócios dos componentes da interface do usuário com mais eficiência. A composição de ganchos personalizados, o tratamento de efeitos colaterais, a API de contexto para gerenciamento de estado global e os componentes de ordem superior permitem que os desenvolvedores criem aplicativos React modulares e fáceis de manter.

Ao aplicar estas técnicas, os programadores podem criar aplicações altamente escaláveis e de fácil manutenção com uma melhor organização do código e um melhor desempenho.

Estas referências fornecem informações adicionais e detalhes aprofundados sobre os novos recursos do React 18 e as práticas recomendadas para separar a lógica comercial dos componentes da interface do usuário.

Considera este artigo útil? Deixe um like ou um comentário. Gracias 🙏.