Linguagens mal tipadas, como JavaScript, tornam a programação fácil. Você não precisa vasculhar a documentação para entender cada tipo em suas dependências, especialmente ao codificar em um IDE. Embora esse recurso possa ser útil, ele pode se tornar um fardo para você e sua equipe à medida que o número de variáveis aumenta e os desenvolvedores antigos deixam seus projetos.
A verificação de tipos no React por meio do pacote prop-types garante que você saiba o que cada variável armazena, mesmo se houver documentação em falta ou não é útil. Neste discurso, examinamos os tipos de prop em profundidade para ajudá-lo a construir uma base de código de qualidade.
Pré-requisitos
Antes de começar, certifique-se de ter um conhecimento básico do React. Você pode importar o código deste tutorial para seu próprio aplicativo e começar a experimentar.
Usamos Node.js. Você só precisa incluir as principais bibliotecas React em seu arquivo package.json :
"dependências": { "react":"^ 17.0.1", "react-dom":"^ 17.0.1", "react-scripts":"4.0.0", "web-vitals":"^ 0.2.4"
}
Certifique-se de ter um projeto React e Node.js completo. Agora você está pronto para começar a trabalhar com tipos de acessórios.
Quais são os tipos de prop do React?
Os tipos de prop do React são uma maneira de garantir que os tipos passados para suas funções correspondam aos que você pretendia que a função assumisse. Os tipos de objetos evitam que você faça uma chamada de método inadequada, principalmente quando combinados com o teste de unidade.
Não é incomum encontrar uma função em seu código, muito tempo depois de escrevê-la, e perceber que ela não corresponde exatamente ao que você precisa. Por exemplo, se um método retornar de forma confiável um carimbo de data/hora ISO baseado em string e você estiver executando matemática em carimbos de data/hora UTC numéricos, o resultado será um valor indefinido incômodo em algum ponto após a sua chamada de função.
Nos bastidores, o React compara os tipos de propriedade passados a um componente com aqueles que você define. A estrutura registra um aviso no console quando eles não correspondem.
Uma vez que a função apenas registra um aviso, certifique-se de verificar seu console antes de colocá-lo em produção. Caso contrário, você pode perder um conflito.
Por que devo verificar a digitação no React e no JavaScript?
Linguagens com digitação fraca não exigem que você especifique os tipos associados a diferentes variáveis -o JavaScript não verifica suas variáveis. Eles são diferentes das linguagens do lado do servidor fortemente tipadas, em que erros fatalmente quebram programas em tempo de execução, criando uma dor de cabeça para usuários e desenvolvedores.
Considere os seguintes componentes do React:
importar PropTypes de'prop-types'; //Componente baseado em classe
class CustomComponent extends React.Component { static defaultProps={ mystring:"Olá", appid:"App-1" } construtor (adereços) { super(); this.myString=props.message;
} render () { Retorna (
{this.myString} {this.props.appid}
)
}
} //Componente funcional
Adição const=(adereços)=> { console.log (adereços); const outputNum=props.mynum + props.mynum; Retorna (
Resposta: {outputNum}
)
};
Existem várias variáveis e propriedades que você deve definir. A variável mynum é um número e appid é um identificador exclusivo baseado em string para o aplicativo.
Se você passar <✓mynum como uma string, o componente falha na renderização, criando um problema potencialmente sério. A verificação de tipo permite encontrar esses problemas antecipadamente, alertando-o sobre propriedades definidas de forma inadequada.
Verificação de tipo em React
A verificação de tipo no React por meio dos tipos prop requer a criação de um objeto separado contendo metadados relacionados às suas propriedades. O módulo PropTypes contém vários tipos de propriedade que correspondem aos disponíveis em JavaScript.
Adicione o seguinte no mesmo arquivo de seus componentes para verificar se as propriedades que você passou estão corretas:
Addition.propTypes={ mynum: PropTypes.number
} CustomComponent.propTypes={ mystring: PropTypes.string, appid: PropTypes.string
}
Este objeto garante que mynum seja um número. Ele também garante que appid e mystring sejam strings. O programa registra no console quando eles não estão.
Tipos de prop disponíveis no React
React é uma biblioteca JavaScript. Os tipos de propriedade disponíveis são iguais aos do JavaScript.
Os tipos disponíveis, combinando com seus equivalentes em JavaScript, incluem:
- Matriz para armazenar listas de valores
- Elemento que representa um elemento DOM
- Nó que representa um nó DOM
- Número que representa o tipo numérico JavaScript
- Objeto que representa um objeto JavaScript
- String armazenando caracteres
- Símbolo que representa o objeto JavaScript que armazena valores de uma maneira única
Também é possível declarar que uma propriedade é uma instância de uma classe. Use PropTypes.instanceOf(object) para fazer isso.
Especificando valores padrão
Há um uso adicional para tipos de propriedade. O código pode ser interrompido quando você não passa os parâmetros. Para evitar isso, você pode definir valores prop padrão em todo seu código. No entanto, esse processo se torna difícil conforme seu programa cresce e você precisa controlar um número incontável de variáveis.
A estrutura React permite definir padrões significativos junto com seus componentes. Você pode definir appid como “App-1” e mystring como “Hello”:
CustomComponent.defaultProps={ mystring:"Olá", appid:"App-1"
}
Este recurso também funciona com componentes funcionais:
Addition.defaultProps={ mynum: 0
}
Agora, se as propriedades não forem configuradas, o programa não falhará na renderização. Em vez disso, os valores correspondem aos que você definiu.
Valores padrão com Babel
Se estiver usando transformações Babel , você pode escrever um código mais limpo ao definir os padrões. Em vez de usar um objeto separado, incorpore-os diretamente no componente de destino. O Babel transforma seu código no formato apropriado.
Nosso componente padrão torna-se:
//Componente baseado em classe
class CustomComponent extends React.Component { static defaultProps={ mystring:"Olá", appid:"App-1"
} construtor (adereços) { super(); this.myString=props.message;
}
render () { Retorna (
{this.myString} {this.props.appid}
)
}
}
Não há necessidade de procurar em arquivos JavaScript maiores para encontrar os padrões. Eles estão diretamente no objeto anexado. Há um impacto nominal no tempo de compilação do seu código. No entanto, os usuários não notarão a diferença.
Usando valores padrão apropriadamente
Definir padrões nem sempre é a melhor prática. Há casos em que você deseja verificar se um valor não foi fornecido e definir o conteúdo renderizado de forma adequada. Em vez de fornecer mynum com um valor padrão, você pode verificar um valor undefined e definir um alerta.
Usar esses valores funciona melhor quando há um padrão lógico correspondente ao tipo que você definiu. Isso é ideal para appid ou mystring . Configurá-los renderiza uma mensagem completa, mesmo se você não fornecer valores.
Monitorando remotamente tipos de propriedade conflitantes
Embora o React registre os problemas no console e você deseje testar os componentes antes de colocá-los em produção, também é possível monitorar os problemas na produção. As ferramentas de gerenciamento de desempenho de aplicativos (APM) capturam problemas e informações enviadas ao console, transferindo-os para um local centralizado.
Dessa forma, os tipos de propriedade servem como uma maneira poderosa de detectar bugs que inadvertidamente atingem seus ambientes de desenvolvimento ou produção. Fique por dentro do seu APM após cada lançamento.
Eliminando confusão com tipos de adereços no React
Embora a fraca digitação de JavaScript possa ajudá-lo a enviar aplicativos rapidamente, a intenção original de uma função pode ser perdida à medida que sua base de código cresce. Verificar os tipos de propriedade e registrar os conflitos em um local acessível dá à sua equipe o conhecimento para usar sua base de código sem ler mais código ou pesquisar na documentação.
Aqui, discutimos como resolver esse problema usando os tipos de acessórios no React. Também vimos como criar valores padrão que podem ajudar a evitar que variáveis indefinidas se tornem um grande problema.
A postagem O guia moderno para React prop types apareceu primeiro no LogRocket Blog .
