static propTypes Vs React.PropTypes

Question

在完全阅读之前请不要关闭此问题。 这听起来像是一个可以主要由一个人的意见回答的问题。 但为什么PropTypes有两种实现方式？ 哪一个更受欢迎？

一种方法是使用static关键字并定义我们的propTypes 。

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

另一种方法是做这样的事情：

class App extends React.Component {
  ...
}

App.propTypes = {
  ...
}

如果我们在构建应用程序进行生产时使用static关键字，我们可以删除propTypes吗？ 由于鼓励删除propTypes以提高性能。

Answer 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 ，其中包括上述转换以及其他一些好东西，因为我猜您还希望进一步优化您的应用（：

Answer 2

我认为它是因为第一个版本

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

是无效的ES6。 您不能在类声明中分配静态变量。 如果要使用该版本，则需要将转换器设置为包含ES7。 至少这是我的猜测，考虑到我在工作中的设置与我现在使用的设置。