React 中的 PropTypes

IT技术 reactjs react-proptypes
2021-04-11 07:40:22

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

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

这些到底是PropTypes干什么的?它们是值得拥有还是必须拥有?

3个回答

正如 finalFreq 所指出的,我已经纠正了!“提供的示例在 React 的未来版本中将完全正常。React 不推荐直接调用 proptypes 函数,但注释组件在当前和未来版本中都可以正常工作。”

如果您只是在 JS 中学习类型,我建议使用 flowtypes,它在构建时而不是运行时工作。这在编辑器中有效!编辑器扩展还使用强推理来在不那么明显的类型丢失、空值或不同类型时提醒您。主要好处是它可以在不减慢运行时间的情况下加快开发速度并减少错误。您可以在生产之前轻松地从 js 中剥离流程。

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

如果您想要更强大和功能更强大的集合我建议使用 TypeScript来学习 JS 中的类型。

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

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

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

谢谢!接得好!更正!
2021-05-25 07:40:22
当涉及到弃用消息时,这个答案可能会产生误导,所提供的示例将在未来版本的 react 中工作得很好。React 不推荐直接调用 proptypes 函数,但注释组件在当前和未来版本中都可以正常工作。facebook.github.io/react/warnings/dont-call-proptypes.html
2021-06-05 07:40:22
不确定您是否暗示 TypeScript 在编译时不起作用,或者它不如 Flowtypes 有趣,但 TypeScript 在编译时绝对起作用 - 这就是重点。至于它有多有趣,这完全是见仁见智的问题。
2021-06-11 07:40:22
实际上经过几个月的工作。我完全不同意我原来的说法。Flow 在短期内更容易掌握,但 Typescript 的功能如此丰富,从长远来看,如果我不选择它,我会疯了。
2021-06-18 07:40:22

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

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

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

在 React 中,你应该编写可重用的组件,为此你必须以尽可能清晰的方式定义它们的接口。 -定义且易于使用。您必须始终验证您的数据。

假设您有一个电子商务网站,并且想要在主页上展示您的产品。为此,您需要创建 Product 组件并在其中验证数据以防止自己在要显示价格的“数字”的地方显示“true”。下面是一个例子:

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

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

如果你意识到你为单个组件声明了太多的 props,并且它们彼此之间没有关联,那么创建多个组件可能会更好,每个组件都有更少的 props 和职责。

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