Reaccionar PropTypes vs.Flujo

101

PropTypes y Flow cubren cosas similares pero utilizan enfoques diferentes. PropTypes puede darle advertencias durante el tiempo de ejecución, lo que puede ser útil para encontrar rápidamente respuestas mal formadas provenientes de un servidor, etc. Sin embargo, Flow parece ser el futuro y con conceptos como genéricos es una solución muy flexible. Además, el autocompletado que ofrece Nuclide es una gran ventaja para Flow.

Mi pregunta ahora es cuál es la mejor manera de hacerlo cuando se inicia un nuevo proyecto. ¿O podría ser una buena solución utilizar Flow y PropTypes? El problema de usar ambos es que escribe mucho código duplicado. Este es un ejemplo de una aplicación de reproductor de música que escribí:

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 definiciones contienen básicamente la misma información y cuando se cambia el tipo de datos, ambas definiciones deben actualizarse.

Encontré este complemento de babel para convertir declaraciones de tipo a PropTypes, lo que podría ser una solución.

danielbuechele
fuente
1
Si desea comenzar con Flow, pruebe esta publicación: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch
1
Por experiencia, usar el complemento mencionado en la pregunta no es una muy buena idea. No admite todos los tipos de componentes, está completamente roto con React Native a partir de la versión 0.39 y, en general, es muy frágil. El propietario del repositorio solía responder a estos problemas con bastante rapidez, pero parece que ha perdido interés y ya no se puede confiar en él para mantenerlo.
Tomty
Pruebe tcomb a través del complemento de Babel para comprobar el tipo estático y en tiempo de ejecución mediante Flow y tcomb.
comerc

Respuestas:

81

Un año después de hacer esta pregunta, quería dar una actualización sobre cómo mis experiencias con este problema.

Como Flow evolucionó mucho, comencé a escribir mi código base con él y no agregué ninguna nueva definición de PropType. Hasta ahora, creo que este es un buen camino a seguir, porque como se mencionó anteriormente, le permite no solo escribir accesorios sino también otras partes de su código. Esto es muy útil, por ejemplo, cuando tiene una copia de sus accesorios en el estado, que el usuario puede modificar. Además, la finalización automática en IDE es una ganancia increíble.

Los convertidores automáticos en una u otra dirección realmente no despegaron. Entonces, para nuevos proyectos, ahora realmente recomendaría usar Flow sobre PropTypes (en caso de que no quiera escribir dos veces).

danielbuechele
fuente
¿Qué IDE usas? Webstorm?
sergey.tyan
3
Estoy usando Atom con el complemento ide-flowtype.
danielbuechele
todavía necesita propTypes cuando usa childContextTypes - stackoverflow.com/questions/42395113/…
gkd
3
ya no es necesario usar propTypes cuando se manejan contextos secundarios debido a la nueva API de contexto: reactjs.org/docs/context.html
SteveB
35

Aparte de que ambos pertenecen al amplio campo de la verificación de tipos, no hay mucha similitud entre los dos.

Flow es una herramienta de análisis estático que utiliza un superconjunto del lenguaje, lo que le permite agregar anotaciones de tipo a todo su código y detectar una clase completa de errores en el momento de la compilación.

PropTypes es un verificador de tipos básico que se ha parcheado en React. No puede verificar nada más que los tipos de accesorios que se pasan a un componente determinado.

Si desea una verificación de tipo más flexible para todo su proyecto, Flow / TypeScript son las opciones adecuadas. Siempre que solo pase tipos anotados a componentes, no necesitará PropTypes.

Si solo desea verificar los tipos de accesorios, no complique demasiado el resto de su base de código y elija la opción más simple.

Dan Prince
fuente
11
Sí, son muy diferentes en términos de cómo funcionan. Sin embargo, creo que el propósito de usarlos es muy similar. Pero una cosa que señaló es un buen punto: Flow le permite cubrir más de su base de código, mientras que está limitado a los accesorios cuando usa PropTypes.
danielbuechele
2
El propósito de uso solo es muy similar si solo usa Flow para verificar los tipos de accesorios. Uno es básicamente un idioma, el otro es apenas una biblioteca.
Dan Prince
Totalmente de acuerdo con @DanPrince. Y no creo que sea una buena idea comprobar las respuestas mal formadas del servidor con PropTypes. Es mejor si tiene verificaciones manuales para esto y su interfaz de usuario responde correctamente (muestra un mensaje de advertencia, por ejemplo) en lugar de simplemente lanzar una advertencia en la consola.
Yan Takushevich
6
@YanTakushevich Debes hacer ambas cosas. Los PropTypes deben desactivarse durante la producción de todos modos, por lo que siempre necesita verificaciones manuales para asegurarse de que sus usuarios tengan una buena experiencia. Sin embargo, PropTypes puede ser muy útil para las advertencias en tiempo de ejecución durante el desarrollo. Es solo una buena red de seguridad para asegurarse de no olvidar nada.
ndbroadbent
27

Creo que el punto perdido aquí es que Flow es un verificador estático, mientras que PropTypes es un verificador de tiempo de ejecución , lo que significa

  • El flujo puede interceptar errores en sentido ascendente durante la codificación: teóricamente puede pasar por alto algunos errores que no conoce (si no implementó el flujo lo suficiente en su proyecto, por ejemplo, o en el caso de objetos anidados profundos)
  • PropTypes los detectará aguas abajo durante la prueba, por lo que nunca se perderá
Rewieer
fuente
1
aquí hay un complemento de babel dedicado ya npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg
15

Intente declarar el tipo de accesorios usando solo Flow. Especifique un tipo incorrecto, como número en lugar de cadena. Verá que esto se marcará en el código que usa el componente dentro de su editor compatible con Flow. Sin embargo, esto no hará que falle ninguna prueba y su aplicación seguirá funcionando.

Ahora agregue el uso de React PropTypes con un tipo incorrecto. Esto HARÁ que las pruebas fallen y se marquen en la consola del navegador cuando se ejecute la aplicación.

En base a esto, parece que incluso si se usa Flow, también se deben especificar PropTypes.

Mark Volkmann
fuente
Depende de cómo se realicen las pruebas, si usa la prueba instantánea de jest, las pruebas fallarán con valores de propiedad no válidos.
Alexandre Borela
3
La ventaja del error en su IDE es que lo ve inmediatamente antes de ejecutar las pruebas.
Tom Fenech
Más 1 para el enfoque con cinturón y tirantes.
David A. Gray