7 dicas e truques no React

Utilizar TypeScript

Quer estejamos a falar apenas de reagir ou outras bibliotecas, utilizando Tipografia ajudará muito nos esforços para manter a sua código organizado. comparemos o seguinte Javascript vs Typescript lidando com tipos de props.

importar PropTypes de 'prop-types'

function UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
firstname: PropTypes.string.isRequired,
lastname: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

{users.map((user) => )}

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
firstname: PropTypes.string.isRequired,
lastname: PropTypes.string.isRequired
...
}))
}

interface Utilizador {
primeiro nome: String!
apelido: String!
...
}

function UserCard({ user }: { user: User }) {
return

{user.firstname}, {user.lastname}

}

function UserList({ users }: { users: User[] }) {
return

{users.map((user) => )}

Imagine ter todos os seus esquemas de dados como interfaces num único local e reutilizá-los em todo o resto do seu código. Isto não só o ajudará a evitar erros de digitação, como também, no caso de querer alterar o esquema, só o deverá alterar num único local.

Além disso, muitas bibliotecas javascript conhecidas estão a migrar para o Typescript, por exemplo: AdonisJS

Separar componentes de apresentação e de contentor

Separar os componentes de apresentação e de contentor torna o nosso código mais fácil de testar e de analisar.

Componentes de apresentação estão preocupados com o aspeto das coisas. Recebe o seu dados e comportamento dos componentes principais.

Componentes do contentor estão preocupados com como as coisas funcionam. Eles fornecem o dados e comportamento para componentes de apresentação ou outros componentes do contentor.

A utilização desta abordagem permite nós para reutilizar os mesmos componentes de apresentação com dados e comportamentos diferentes. Para além disso, torna o nosso código mais limpo e muito mais fácil de testar.

Veja o exemplo seguinte com o componente do utilizador, que é utilizado com diferentes contentores que fornecem dados e comportamentos diferentes.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Utilização Ganchos React e Componentes Funcionais Os Componentes Funcionais "referidos anteriormente como Componentes sem Estado" já não são sem Estado. Graças aos Ganchos React, agora pode usar o ganchoState para armazenar o estado num Componente funcional. ou até usar o ciclo de vida do componente usando useEffect. Componentes funcionais são fáceis de ler e testar. O React Core tem alguns outros hooks úteis que podem ser explorados na Referência de Hooks. O mais incrível é que também é possível definir hooks personalizados. No exemplo a seguir, criamos um hook react personalizado chamado useDebounce. Que é usado para limitar as chamadas da API de preenchimento automático quando o texto de entrada é alterado.

import { useEffect } from 'react';;
import { debounce } from 'lodash';
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
return debounced;
}
export default function SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // API de busca (opcional)
}, 1000) // 1 segundo

retornar (

{...}
)
}

Além disso, os hooks React são um ótimo substituto para os componentes de ordem superior (HoCs). Componente estilizado O Componente estilizado é uma biblioteca que permite a introdução de CSS dinâmico no nível do componente, aproveitando as vantagens do ES. Torna os seus componentes mais previsíveis e reutilizáveis. Esqueça a perda de muito tempo à procura do nome da classe correta para um elemento, enquanto tenta evitar a utilização de uma já existente. Com o Styled Components, garanta que seus estilos tenham escopo para o componente e nomes de classe gerados automaticamente na etapa de construção. Além disso, nunca foi tão fácil criar CSS dinâmico. Seus estilos serão gerados de acordo com as propriedades passadas para o componente. No exemplo a seguir, o estilo da div é dependente da prop delineada e do tema global.

const Wrapper = styled.div`

  fronteira: ${props => props.outlined ? '1px solid' : 'none'};

    fundo: ${props => props.theme.light ? 'black' : 'white'}

O último ponto sobre os componentes com estilo é que ele melhora o desempenho ao não carregar estilos desnecessários de componentes não utilizados. Biblioteca de preenchimento de slots Vamos definir um layout para seu aplicativo react. então você quer adicionar um widget na barra lateral apenas para uma página específica. Se você não considerou esse caso desde o início, isso pode exigir uma grande mudança no layout. Mas usando uma biblioteca como ‣ Você pode simplesmente definir um Slot na Barra Lateral. Então preencha esse slot com widgets apenas para páginas específicas. dessa forma você evitará passar flags ao longo de toda a árvore de componentes para acessar a Barra Lateral. Tem um comportamento semelhante ao dos Portais React, que também é uma óptima solução para casos como Modais, Tooltips...

import { Slot, Fill, Provider } from 'react-slot-fill';
const Sidebar = (props) =>
 
export default Toolbar;
Sidebar.Item = (props) =>

{ props.label }
const Widget = () =>
[

];
const Page = ({children}) =>

{filhos}

const HomePage = () =>

uma Página sem Widjet
const DashboardPage = () =>

uma Página com Widjet

Componentes de ordem superior Mesmo que os hooks React substituam os HOCs na maioria dos casos. Os HoCs ainda são uma ótima opção para ocultar a complexidade dos componentes, como fornecer vários props para componentes de página ou renderização condicional (rotas privadas, status de carregamento ...) O exemplo a seguir ilustra como podemos encapsular a complexidade de rotas privadas e props comuns de página em HoCs reutilizáveis aplicados a todas as páginas da aplicação. Tenha em mente que a maioria dos casos de HoCs pode ser substituída por Hooks React e que podemos, por engano, substituir props por HoCs compostos. Portanto, use HoCs apenas quando necessário para manter os componentes da página mais limpos. Caso contrário, use Ganchos React.

função withPrivateRoute(Componente) {
...
return function PrivateRoute(props) {
se (!userConnected) return ;
return ;
};
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
Página de perfil
}
export default withPrivateRoute(withPageProps(ProfilePage))

Limites de erro Os limites de erro são componentes de classe que captam todos os erros/excepções lançados ao nível dos filhos. Quando declarados no nível superior, permitem-lhe tratar corretamente os erros, mostrando uma mensagem de erro e registando o erro numa ferramenta de monitorização da plataforma, como o Sentry. Desta forma, será o primeiro a detetar erros e a tentar corrigi-los antes que tenham impacto na experiência do utilizador. Nota: ErrorBoundaries deve ser declarado na classe que não suporta componentes funcionais.

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
se (this.state.hasError) {
return
Algo correu mal! Contactar o administrador
;
}
return this.props.children;

}
}