Static propTypes Vs React.PropTypes

Пожалуйста, не закрывайте этот вопрос перед чтением полностью. Это может звучать как вопрос, на который можно ответить в первую очередь одним мнением. Но почему существуют две реализации PropTypes? Какой из них предпочтительнее?

Один из способов - использовать статическое ключевое слово и определить наш propTypes.

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

Другой способ - сделать что-то вроде этого:

class App extends React.Component {
  ...
}

App.propTypes = {
  ...
}

Можно ли удалить propTypes, если мы используем ключевое слово static во время создания приложения для производства? Поскольку для повышения производительности рекомендуется удаление propTypes.

Ответ 1

Это версия es7

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

в то время как это версия es6

class App extends React.Component {
  ...
}

App.propTypes = {
  ...
}

Лично я предпочитаю версию es7, потому что имеет смысл рассматривать propTypes в верхней части компонента, чтобы дать обзор того, что необходимо для визуализации компонента (аналогично тем, какие параметры необходимы для функции).

Независимо от того, какую версию вы используете, если вы хотите вырезать propTypes для производства, вам нужно использовать https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types. Кроме того, вы можете использовать https://github.com/thejameskyle/babel-react-optimize, который включает в себя вышеупомянутое преобразование плюс несколько других лакомств, так как я предполагаю, что вы также захотите оптимизировать свое приложение дальше (

Ответ 2

Я думаю, что это потому, что первая версия

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

недействителен ES6. В объявлении класса не может быть задана статическая переменная. Если вы хотите использовать эту версию, вам нужно будет установить ваш транспилер для включения ES7. По крайней мере, это мое предположение, учитывая настройки, которые у меня есть на работе, и настройки, которые я использую сейчас.