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

正如finalFreq指出的那样，我站出来了！＆＃34;提供的示例将在未来版本的反应中完美地运行。不推荐使用直接调用proptypes函数，但注释组件在当前和未来版本中都可以正常工作。＆＃34;

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

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

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

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

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

编辑：我还想明确，也可以剥离proptypes进行生产。

Answer 2

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

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

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

Answer 3

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

让我们假设您有一个电子商务网站，并且想要在您的首页中显示您的产品。为此，您需要创建Product组件，并在其中内部，必须验证数据以防止自己在要显示价格的“数字”的地方显示“ true”。这是一个示例：

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

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

如果您意识到为单个组件声明的道具过多，并且彼此之间不相关，那么最好创建多个组件，每个组件都具有较少的道具和职责。

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

React中的PropTypes

3 个答案: