【问题标题】:PropTypes in ReactReact 中的 PropType
【发布时间】:2016-10-24 22:19:44
【问题描述】:

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

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


【解决方案1】:

正如 finalFreq 所指出的,我已得到纠正! “提供的示例将在未来版本的 react 中完美运行。不推荐使用 React 直接调用 proptypes 函数,但在当前和未来版本中注释组件将正常运行。”

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

流类型: https://flowtype.org/docs/getting-started.html#_

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

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

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

编辑:我还想明确一点,道具类型也可以被剥离用于生产。

【讨论】:

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

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

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

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

【讨论】:

    【解决方案3】:

    在 React 中,您应该编写可重用的组件,为此您必须以最清晰的方式定义它们的接口。如果您希望您的组件在整个应用程序中被重用,确保我们的组件及其参数定义明确且易于使用。您始终必须验证您的数据。

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

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

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-27
      • 2023-03-15
      • 2016-10-11
      • 2016-11-25
      • 2021-11-06
      • 2019-01-07
      相关资源
      最近更新 更多