React PropTypes vs. Fluxo

100

PropTypes e Flow cobrem coisas semelhantes, mas usam abordagens diferentes. Os PropTypes podem fornecer avisos durante o tempo de execução, o que pode ser útil para encontrar rapidamente respostas malformadas vindas de um servidor, etc. No entanto, o Flow parece ser o futuro e com conceitos como genéricos é uma solução muito flexível. Além disso, o preenchimento automático oferecido pela Nuclide é uma grande vantagem para o Flow.

Minha dúvida agora é qual é o melhor caminho a seguir, ao iniciar um novo projeto. Ou poderia ser uma boa solução para usar ambos, Flow e PropTypes? O problema de usar ambos é que você escreve muitos códigos duplicados. Este é um exemplo de um aplicativo reprodutor de música que escrevi:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Ambas as definições contêm basicamente as mesmas informações e quando o tipo de dados é alterado, ambas as definições precisam ser atualizadas.

Eu encontrei este plugin babel para converter declarações de tipo em PropTypes, o que pode ser uma solução.

danielbuechele
fonte
1
Se você quiser começar com o Flow, tente este post: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch
1
Por experiência, usar o plugin mencionado na pergunta não é uma ideia muito boa. Ele não suporta todos os tipos de componentes, foi totalmente quebrado com o React Native a partir da v0.39 e geralmente é muito frágil. O proprietário do repo costumava responder a essas questões com bastante rapidez, mas parece que ele perdeu o interesse e não pode mais ser confiável para mantê-lo.
Tomty 01 de
Experimente tcomb através do plugin Babel para verificação de tipo estático e em tempo de execução usando Flow e tcomb.
comerc

Respostas:

81

Um ano depois de fazer esta pergunta, eu queria dar uma atualização sobre como minhas experiências com esse problema.

Como o Flow evoluiu muito, comecei a digitar minha base de código com ele e não adicionei nenhuma nova definição de PropType. Até agora, acho que esse é um bom caminho a seguir, porque, conforme mencionado acima, ele permite que você não apenas digite props, mas também outras partes do seu código. Isso é muito útil, por exemplo, quando você tem uma cópia de seus adereços no estado, que pode ser modificada pelo usuário. Além disso, o preenchimento automático em IDEs é um ganho incrível.

Os conversores automáticos em uma ou outra direção realmente não decolaram. Portanto, para novos projetos, eu realmente recomendo usar Flow em vez de PropTypes (caso você não queira fazer a digitação duas vezes).

danielbuechele
fonte
qual IDE você usa? Webstorm?
sergey.tyan
3
Estou usando o Atom com o plug-in ide-flowtype.
danielbuechele
você ainda precisa de propTypes ao usar childContextTypes - stackoverflow.com/questions/42395113/…
gkd
3
não é mais necessário usar propTypes ao lidar com contextos filho devido à nova API de contexto: reactjs.org/docs/context.html
SteveB
35

Além de ambos pertencerem ao amplo campo de verificação de tipo, não há realmente muita semelhança entre os dois.

O fluxo é uma ferramenta de análise estática que usa um superconjunto da linguagem, permitindo que você adicione anotações de tipo a todo o seu código e capture uma classe inteira de bugs em tempo de compilação.

PropTypes é um verificador de tipo básico que foi corrigido no React. Ele não pode verificar nada além dos tipos de adereços sendo passados ​​para um determinado componente.

Se você deseja uma verificação de tipo mais flexível para todo o projeto, Flow / TypeScript são as escolhas apropriadas. Contanto que você esteja apenas passando tipos anotados para componentes, você não precisará de PropTypes.

Se você deseja apenas verificar os tipos de prop, não complique demais o resto da sua base de código e opte pela opção mais simples.

Dan Prince
fonte
11
Sim, eles são muito diferentes em termos de como funcionam. No entanto, o propósito de usá-los é muito semelhante, eu acho. Mas uma coisa que você apontou é um bom ponto: o Flow permite que você cubra mais de sua base de código, enquanto você está limitado a adereços ao usar PropTypes.
danielbuechele
2
O objetivo de uso é muito semelhante apenas se você usar o Flow apenas para verificar os tipos de adereços. Um é basicamente uma linguagem, o outro mal é uma biblioteca.
Dan Prince
Concordo totalmente com @DanPrince. E não acho que seja uma boa ideia verificar as respostas malformadas do servidor com PropTypes. É melhor se você tiver verificações manuais para isso e sua IU responder corretamente (exibe uma mensagem de aviso, por exemplo) em vez de apenas jogar um aviso no console.
Yan Takushevich
6
@YanTakushevich Você precisa fazer os dois. PropTypes deve ser desativado durante a produção de qualquer maneira, então você sempre precisa de verificações manuais para garantir que seus usuários tenham uma boa experiência. No entanto, PropTypes pode ser muito útil para avisos de tempo de execução durante o desenvolvimento. É apenas uma boa rede de segurança para garantir que você não se esqueça de nada.
ndbroadbent
27

Eu acredito que o ponto perdido aqui é que o Flow é um verificador estático, enquanto PropTypes é um verificador de tempo de execução , o que significa

  • O fluxo pode interceptar erros upstream durante a codificação: ele pode, teoricamente, ignorar alguns erros que você não conhece (se você não implementou o fluxo suficiente em seu projeto, por exemplo, ou no caso de objetos aninhados profundos)
  • PropTypes os pegará downstream durante o teste, então nunca faltará
Rewieer
fonte
1
aqui está um plugin babel dedicado já npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg
15

Tente declarar o tipo de adereços usando apenas o Flow. Especifique um tipo incorreto, como número em vez de string. Você verá que isso será sinalizado no código que usa o componente em seu editor com reconhecimento de fluxo. No entanto, isso não fará com que nenhum teste falhe e seu aplicativo ainda funcionará.

Agora adicione o uso de React PropTypes com um tipo incorreto. Isso IRÁ fazer com que os testes falhem e sejam sinalizados no console do navegador quando o aplicativo for executado.

Com base nisso, parece que mesmo que o Flow esteja sendo usado, os PropTypes também devem ser especificados.

Mark Volkmann
fonte
Depende de como os testes são feitos, se você usar o teste de instantâneo de jest, os testes falharão com valores de propriedade inválidos.
Alexandre Borela
3
A vantagem do erro em seu IDE é que você o vê imediatamente antes mesmo de executar os testes.
Tom Fenech de
Mais 1 para abordagem de cinto e suspensórios.
David A. Gray,