2016-01-16 9 views
10

Per quanto ne so, l'unico modo per disabilitare la convalida React PropType è di ugolare Reagire con process.env.NODE_ENV definito come 'production'.c'è un modo per disabilitare o velocizzare la validazione di React PropType in modalità sviluppo?

Tuttavia, vorrei utilizzare la modalità di sviluppo senza convalida runtime PropType per i seguenti motivi:

  • Rallentano la mia app in modo significativo. convalida PropType è l'autore del reato top profilatura risultati, perché:
    • ho una gerarchia dei componenti abbastanza profonda con la convalida PropType a più livelli (sì devo corretta shouldComponentUpdate ecc)
    • sto usando Redux, il che significa tutti gli aggiornamenti partono da o vicino alla parte superiore della gerarchia
    • ho interazioni trascinamento del mouse, che si sforzano per 30 aggiornamenti al secondo
  • ho ancora voglia di vedere tutti gli altri Reagire avvisi e gli errori, che sarebbe anche ottenere disabilitati in modalità di produzione.
  • Il flowtype può apparentemente validare PropTypes in molti casi.

Se non altro ho potuto creare un trasformatore per babel-plugin-react-transform che strappa via tutti i componenti propTypes (o forse solo quelli relativi a componenti che ho annotato in un certo modo), ma mi chiedo se c'è un modo più semplice per farlo, poiché React potrebbe fornire facilmente un flag di compilazione per disabilitare la convalida di PropType.

UPDATE: quel plugin Babel già esiste (https://www.npmjs.com/package/babel-plugin-react-remove-prop-types)

risposta

5

Risposta breve: Non c'è nessuna bandiera semplice per disattivare solo la convalida PropType


Attualmente, la convalida PropType è attivato per __DEV__ variabile globale . Se è cambiato in falso, perderai altri avvisi ed errori di React che, come hai detto, non puoi.

Questo codice here in ReactDOMFactories mostra come ReactElementValidator e ReactElement fabbriche sono scelti per definire come una creazione elemento funzionerà:

function createDOMFactory(tag) { 
    if (__DEV__) { 
    return ReactElementValidator.createFactory(tag); 
    } 
    return ReactElement.createFactory(tag); 
} 

In ReactElementValidator.createElement si può vedere che chiama ReactElement.createElement e poi validatePropTypes:

var ReactElementValidator = { 

    createElement: function(type, props, children) { 

    /* some code here */ 

    var element = ReactElement.createElement.apply(this, arguments); 

    /* some code here */ 

    // here would be a good place for the flag that you need 
    validatePropTypes(element); 

    return element; 
    } 

Non sono sicuro di come queste informazioni possano aiutarti, ma almeno mostra che non esiste un modo semplice per disattivare PropType da una bandiera come ti sei chiesto .


AGGIORNAMENTO - 10/Maggio/2017
Andy scoperto che c'è un Babel Plugin that removes Prop Types.
Non l'ho provato. Assicurati di leggere la sezione Is it safe? del plug-in per vedere se è adatto a te.

+0

è bello, non ho mai letto molto degli interni di React, ma è pulito che hanno reso la creazione di elementi inseribile in quel modo. – Andy

+1

Ho aggiunto una nota su un plugin babel che ho trovato per rimuovere proptypes (https://www.npmjs.com/package/babel-plugin-react-remove-prop-types) – Andy

Problemi correlati