reactjs - react - Reaccionar PropTypes vs.Flujo

proptypes react

Question

PropTypes y Flow cubren cosas similares pero están utilizando enfoques diferentes. PropTypes puede brindarle advertencias durante el tiempo de ejecución, lo que puede ser útil para encontrar rápidamente respuestas malformadas 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 ofrecido por Nuclide es una gran ventaja para Flow.

Mi pregunta ahora es cuál es el mejor camino a seguir al comenzar un nuevo proyecto. ¿O podría ser una buena solución para usar ambos, Flow y PropTypes? El problema con el uso de ambos es que escribes 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.

Answer 1

Aparte de que ambos pertenecen al campo muy amplio 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 tiempo de compilación.

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

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

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

Answer 2

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 aguas arriba durante la codificación: en teoría, puede omitir algunos errores que no conocerá (si no implementó el flujo lo suficiente en su proyecto, por ejemplo, o en el caso de objetos anidados profundos)
• PropTypes los atrapará río abajo durante la prueba, por lo que nunca se perderá

Answer 3

Intenta 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 un código que usa el componente dentro de su editor Flow-aware. 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 está utilizando Flow, también se deben especificar PropTypes.

Answer 4

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 base de código 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 tienes una copia de tus accesorios en el estado, que el usuario puede modificar. Además, la finalización automática en IDEs es una ganancia increíble.

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