static propTypes Vs React.PropTypes

Question

Veuillez ne pas fermer cette question avant de la lire entièrement. Cette question peut sembler être une question à laquelle on peut répondre principalement par l'opinion de chacun. Mais pourquoi existe-t-il deux implémentations de PropTypes ? Laquelle est préférée ?

Une façon de procéder est d'utiliser le mot clé static et de définir notre propTypes .

class App extends React.Component {
  static propTypes = {
    ...
  }
}

L'autre moyen est de faire quelque chose comme ça :

class App extends React.Component {
  ...
}

App.propTypes = {
  ...
}

Peut-on supprimer le propTypes si nous utilisons static mot-clé au moment de la construction de l'application pour la production ? Puisque la suppression du propTypes est encouragée pour des gains de performance.

Answer 1

Il s'agit d'une version es7

class App extends React.Component {
  static propTypes = {
    ...
  }
}

alors que c'est la version es6

class App extends React.Component {
  ...
}

App.propTypes = {
  ...
}

Personnellement, je préfère la version es7 parce qu'il est plus logique de voir la propTypes en haut du composant, pour donner une vue d'ensemble de ce qui est nécessaire pour rendre le composant (similaire aux paramètres nécessaires pour une fonction).

Indépendamment de la version que vous utilisez, si vous voulez dépouiller propTypes pour la production, vous devez utiliser https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types . Vous pouvez également utiliser https://github.com/thejameskyle/babel-react-optimize qui comprend la transformation ci-dessus plus quelques autres goodies puisque je suppose que vous souhaitez également optimiser davantage votre application ( :

Answer 2

Je pense que c'est parce que la première version

class App extends React.Component {
  static propTypes = {
  ...
 }
}

n'est pas valide ES6. Vous ne pouvez pas avoir une variable statique assignée à l'intérieur de la déclaration de classe. Si vous voulez utiliser cette version, vous devez configurer votre transpilateur pour inclure ES7. C'est du moins ce que je pense, compte tenu des paramètres que j'ai au travail par rapport à ceux que j'utilise actuellement.