Question

React 0.14引入了纯函数作为这样的组件：

export const Label = ({title} => (
  <span>{label}</span>
)

但是，我还想向组件用户描述组件支持哪些属性和类型以及哪些是默认值。

所以我必须添加

Label.propTypes = {
  title: React.PropTypes.string.isRequired
}

Label.defaultProps = {
   title: "unknown"
}

我也可以像这样使用React.Component：

class Label extends React.Component {
  static propTypes = {}
  static defaultProps = { 
    title: "unknown"
  }
  render() {
      <span>{this.props.label}</span>
  }
}

所有内容都会立即可见，并且该组件可以理解。

为什么我们应该使用功能组件？

Answer 1

没有必要使用纯函数组件，创建它们的原因是为了便于创建无状态功能组件而无需扩展Component类。本文stateless-components-in-react详细解释了这一点。

Answer 2

即使在您的情况下，我看到使用功能组件的原因：

在组件规模上没有ES6或React魔法，所以输出JS要短得多。
清洁分离。您有一个返回表示组件的函数。像默认道具这样的“元”数据是像ES6组件一样分开的。
如文档中所述，React希望对功能组件进行特殊优化，以便将来使用它们比使用常规组件更好地进行演示：

在理想情况下，大多数组件都是无状态函数，因为将来我们还可以通过避免不必要的检查和内存分配来对这些组件进行性能优化。如果可能，这是推荐的模式。

使用propTypes时，功能反应组件与React.Component

2 个答案: