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" 到底有什么作用？它们是可有可无的，还是必不可少的呢？

- Benjamin Li

---

很好的功能。如果您未提供propTypes中定义的props，则React将在控制台中抛出运行时警告。https://facebook.github.io/react/docs/typechecking-with-proptypes.html - azium

Answer 1

正如finalFreq指出的那样，我已经纠正了我的错误！“提供的示例在未来版本的React中将完美运行。React已不建议直接调用proptypes函数，但注释组件在当前和未来版本中仍然有效。”

如果你刚刚开始学习JS类型，我建议使用flowtypes，它是构建时而非运行时工作的。这在编辑器中非常实用！编辑器扩展还使用强推理来警告您缺少不明显类型、空值或其他类型的情况。其主要优点在于加快开发速度、减少错误，而不会拖慢运行时间。可以在生产之前轻松地从JS中去除流程。

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

如果你想要更强大、功能更丰富的集合来学习JS类型，我建议使用TypeScript。

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

回答你的问题，proptypes从来不是必须的，并且曾经被视为实验性的。我喜欢它们，但是在我看来，流程类型更加实用。主要用途是通过在开发早期进行警告，防止组件的误用，并为更好地理解（后人）提供编码文档。

编辑：我还要明确指出，proptypes也可以被剥离以用于生产。

- Urasquirrel

---

这个答案可能会在弃用消息方面误导人，提供的示例在未来版本的React中将完美地工作。React已经弃用了直接调用proptypes函数，但是在当前和未来版本中注释组件将完全正常工作。https://facebook.github.io/react/warnings/dont-call-proptypes.html - finalfreq

谢谢！发现得好！已更正！ - Urasquirrel

不确定您是否意味着TypeScript在编译时无法工作，或者它比Flowtypes更不好玩，但是TypeScript绝对可以在编译时工作 - 这是重点。关于它有多有趣，那完全是个人观点的问题。 - Levi Fuller

实际上，经过几个月的工作后，我完全不同意我的原始说法。在短期内，流程更容易掌握，但是Typescript具有如此丰富的功能，从长远来看，如果不选择它，我会变得疯狂。 - Urasquirrel

Answer 2

我们在工作中使用propTypes的方式是从一开始就更好地了解每个组件。您可以根据传递的props看到组件的形状，并更好地了解它的工作原理。

另外，使用.isRequired也很好，因为如果在创建组件时未包括它，您将收到警告。如果期望一个prop是某种类型，但实际上传递的却是不同的类型，它也会发出警告。

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

- finalfreq

Answer 3

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

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

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

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

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

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

- Yilmaz