功能使用propTypes

当反应组分VS React.Component

阵营0.14引入纯功能部件是这样的：功能使用propTypes

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> 
    } 
}

一切都会立即可见和组件可以理解的。

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

来源

2016-03-06 philk

我看到一个可使用的功能部件，即使在你的情况的原因：

没有ES6或魔术做出反应组件上规模，所以输出JS要短得多。
清洁分离。你有一个函数返回一个表示组件。像默认道具这样的“元数据”与ES6组件是分开的。
如文档指出，阵营想提供特殊的优化，功能组件所以它可能是更好的性能明智的未来使用它们比普通的组件，以用于演示：

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

来源

2016-03-06 19:07:22 Mijamo

特别是优化步骤（代码大小和运行时间加速以后）和更清晰的代码（没有React魔法）让我信服！ – philk

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

来源

2016-03-06 14:34:27

总之，使用无状态功能组件当组件：

并不需要
不会被用作ref
任何内部状态不需要任何生命周期行为像componentDidMount或componenetWillReceiveProps

无状态的功能组件的事件让你避免过多的样板和仪式时，我只是没有必要。如果你需要这些其他的东西，请延长正常的Component。

从React 0.14 blog post

这种模式的目的是鼓励应该包含您的应用程序的大部分这些简单的组件的创建。未来，我们还可以通过避免不必要的检查和内存分配来针对这些组件进行性能优化。

这也是一个很好的观点。你的应用程序应该由许多许多小的组件组成，而不是一些庞大而复杂的组件。在许多情况下，小组件并不需要全面的吹响Component的花里胡哨。对于这些，简单的功能就足够了。

来源

2016-03-06 14:38:00 naomik

我知道这一切。我的观点更多的是，为了创建一个可重用的，有文档记录的功能组件，你必须编写相同数量的代码。我的问题更像是功能组件是否具有或将具有任何（性能）好处。我以为我读了一些关于Facebook的计划，以优化功能组件的渲染，因为它们没有副作用。 – philk

所有的优点，结合@Mijamo写了一个很好的答案！ – philk

功能使用propTypes

回答

相关问题