Dovrebbe essere usato `propTypes` e` defaultProps` in combinazione con Flowtype, o Flowtype è abbastanza completo?

Question

Pensando a un semplice esempio come ad esempio:

class CommentAreaComponent extends React.Component { 
static propTypes = { 
    id: PropTypes.string.isRequired, 
    loading: PropTypes.bool, 
}; 

static defaultProps = { 
    loading: false, 
}; 

Nel costruttore posso definire qualcosa di simile per ottenere (credo) la stessa cosa:

class MyComponent extends React.Component { 
    constructor({ 
     loading = false, 
    }:{ 
     id:string, 
     loading?:boolean 
    }) { 
     super(arguments[0]); 
    } 
} 

Il secondo esempio utilizza solo Flowtype . L'utilizzo di Reacts PropTypes e DefaultProps offre un vantaggio? O posso rilasciarli completamente quando usi FlowType?

Answer 1

È possibile utilizzare sicuramente i tipi di flusso anziché Proponi React, ma la sintassi proposta non è il modo comune per farlo. Vedi Flow docs (scorrere verso il basso per la sintassi ES6):

class Button extends React.Component { 
    props: { 
    title: string, 
    visited: boolean, 
    onClick:() => void, 
    }; 

    state: { 
    display: 'static' | 'hover' | 'active'; 
    }; 

    static defaultProps = { 
    visited: false, 
    }; 

    constructor(props) { 
    super(props); 
    this.state = { 
     display: 'static', 
    }; 
    } 

    render() { 
    let className = 'button ' + this.state.display; 
    if (this.props.visited) { 
     //... 
    } 

    return (/*...*/); 
    } 
} 

L'unica cosa che non si può fare con tipi di flusso che si possono fare con PropTypes sta definendo custom validators (ad esempio per controllare che un puntello è un indirizzo email valido).

Ho più Flow React examples on github, ma non li ho ancora testati con Flow v0.22, solo v0.21. Potrebbero aver bisogno di piccoli aggiustamenti.

Answer 2

Come regola generale, l'analisi statica di Flow offre maggiore potenza e maggiore copertura ed è quindi preferibile a propTypes.

Tuttavia, propTypes sono comunque validi nei casi in cui si possono creare oggetti di propagazione degli oggetti attraverso più componenti o in altri scenari di runtime dinamici in cui gli oggetti di scena potrebbero non avere i valori previsti.

prendere in considerazione ottenere il meglio di entrambi con https://github.com/brigand/babel-plugin-flow-react-proptypes

NOTA: non sono affiliato con questa libreria.