React中的PropTypes

问题描述 投票:5回答:2

在某些例子中,我看到过这样的事情:

Footer.propTypes = {
  completedCount: PropTypes.number.isRequired,
  activeCount: PropTypes.number.isRequired,
  filter: PropTypes.string.isRequired,
  onClearCompleted: PropTypes.func.isRequired,
  onShow: PropTypes.func.isRequired
}

这些PropTypes真的在做什么?他们是不是很好或必须拥有?

reactjs react-proptypes
2个回答
3
投票

正如finalFreq所指出的,我站得更正! “所提供的示例将在未来版本的反应中完美地运行.React不赞成直接调用proptypes函数,但注释组件在当前版本和未来版本中都可以正常工作。”

如果您只是在JS中学习类型,我建议使用flowtypes,在构建时而不是运行时工作。这在编辑器中有效!编辑器扩展还使用强推理来在不太明显的类型缺失,null或不同类型时提醒您。主要好处是它可以加速开发并减少错误,而不会减慢运行时间。您可以在生产前轻松地从js中去除流量。

FlowType:https://flowtype.org/docs/getting-started.html#_

如果你想要更强大和更有特色的集合,我建议使用TypeScript来学习JS中的类型。

TypeScript:https://github.com/Microsoft/TypeScript

为了回答你的问题,proptypes从来都不是必须的,并且在某一点上被认为是实验性的。我喜欢它们,但是flowtype更实用恕我直言。主要用途是通过在开发早期发出警告来防止滥用组件,并提供编码文档以便更好地理解(后代)。

编辑:我也想清楚,proptypes也可以剥离生产。


1
投票

我们如何在工作中使用propTypes,以便从一开始就更好地理解每个组件。您可以根据传入的道具查看组件的形状,并更好地了解其工作原理。

使用.isRequired也很棒,因为如果在创建组件时未包含警告,则会收到警告。如果一个道具被认为是一种类型但实际上传递的是不同的东西,它也会发出警告。

这绝不是必要的,但它将使得与其他人一起开发变得更加容易,因为您可以了解组件期望传递的内容以及以何种形式传递。当几乎每天都在创建新组件并且您尝试使用其他人制作的组件并且以前从未接触过它时,这变得更加重要。


0
投票

在React中,您应该编写可重用的组件,并且必须以最清晰的方式定义它们的接口。如果您希望在整个应用程序中重用组件,确保我们的组件及其参数很好是至关重要的。 - 定义和直接使用。您始终必须验证您的数据。

假设您有一个电子商务网站,并希望在您的主页上显示您的产品。为此,您需要创建Product组件,在其中,您必须验证数据以防止您在显示“数字”的价格时显示“true”。这是一个例子:

Product.propTypes = {
  product: PropTypes.shape({
    id: PropTypes.number,
    img: PropTypes.string,
    price: PropTypes.number,
    inCart: PropTypes.bool,
  }).isRequired
};

使用这些功能将大大减少调试应用程序所花费的时间。 shape函数允许我们使用嵌套属性声明对象,并且对于每个对象,我们可以定义它们的类型。

如果您意识到您为单个组件声明了太多道具,并且它们彼此无关,那么创建多个组件可能会更好,每个组件都有较少的道具和责任。

在React的生产版本中,由于性能原因,propTypes验证被禁用。

© www.soinside.com 2019 - 2024. All rights reserved.