React 中的 PropTypes

Question

在一些例子中，我看到了这样的事情：

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

这些 PropTypes 到底在做什么？它们是可有可无还是不可或缺？

Answer 1

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

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

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

Answer 2

正如 finalFreq 所指出的，我的观点是正确的！ "the example provided will work perfectly fine in future versions of react. React deprecated calling the proptypes function directly but annotating a component will work just fine in current and future versions."

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

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

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

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

回答你的问题道具类型从来都不是必须的，而且一度被认为是实验性的。我喜欢它们，但 flowtype 更实用 IMHO.The 主要用途是通过在开发早期发出警告来防止组件被滥用，并提供编码文档以便更好地理解（后代）。

编辑：我还想明确一点，proptypes 也可以在生产中剥离。

Answer 3

在 React 中，您应该编写可重用的组件，为此您必须尽可能清晰地定义它们的接口 way.If您希望您的组件在整个应用程序中重用，确保我们的组件及其参数 well-defined 并且易于使用。您始终需要验证您的数据。

假设您有一个电子商务网站，您希望在主页上展示您的产品。为此，您需要创建 Product 组件并在其中验证数据，以防止您自己在要显示价格 "number" 的地方显示 "true"。这是一个例子：

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

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

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

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

React 中的 PropTypes

PropTypes in React

reactjs

react-proptypes